Next.js 기초 1 - 시작하기 & 라우팅 & 이미지 넣기

동화·2023년 4월 24일

코딩애플

목록 보기

6/7

새로운 프레임워크 next.js를 배워보려고 한다.
왜? client-side rendering 말고 server-side rendering가 유행하고 있기 때문이라고.

client-side rendering : 브라우저에서 html을 실시간으로 만듦
server-side rendering : 서버에서 html을 미리 만들어 보내 줌

client-side rendering은 검색에도 잘 노출되지 않고, 페이지를 불러오는 데에 시간이 제법 걸려서 돈이 많이 소요되는 편이라 한다
그래서 server-side rendering 으로 갈아타는 추세라고 하니 열심히 공부해보쟈

환경 세팅🪛

npx create-next-app@latest --experimental-app

원하는 폴더에서 위를 복사해 실행시켜주면 된다..
물어보는 것도 참말 많다

탭이나 방향키 이용해서 엔터~ 눌러주면서 선택해주면 됨.
만든 폴더로 들어가서 npm install 도 해준다.
page.js가 메인 페이지고

npm run dev

로 실행시켜 바로바로 확인해 볼 수 있다

~~어차피 비울 거지만 간지나는구만..~~

그리고 완전 극 최신버전은 에러가 많이 날 수 있으니 package.json에서 조금 다운시켜준다.

여기까지 하면 세팅은 끝!

라우팅 🖇

기초 세팅

리액트 기본 문법을 이용해 첫 페이지를 일단 세팅한다.

자동 라우팅 🧲

next.js 는 리액트에서 쓰듯이
뭐 하면 이거 자동으로 링크 만들어줘라~ 하고 세팅할 필요가 없다.

이렇게만 세팅해주면 알아서 /list 를 입력했을시 저 페이지를 찾아간다.

라우트 구성

일반적인 라우트

pages/book.js -> /book
pages/book/index.js -> /book
pages/index.js -> /

중첩 라우트

pages/book/essay/index.js -> /book/essay
pages/book/novel/like.js -> /book/novel/like
pages/book/novel.js -> /book/novel

동적 라우트

pages/book/[genre]/index.js -> /book/:genre
pages/book/[genre]/all.js -> /book/:genre/all
pages/book/[...id].js -> /book/* (book/1/like/10)
pages/book/[id].js -> /book/:id

링크 사용하기

import Link from "next/link";

	...

<Link href="/">HOME</Link>
<Link href="/list">LIST</Link>

상단바 (layout.js)

<div className="navbar">
  	<Link href="/">HOME</Link>
	<Link href="/list">LIST</Link>
</div>

라는 대략의 상단바를 page.js에 넣어주었다.
근데 이렇게 하면 너무도 당연히 다른 페이지에선 상단바가 보이지 않는다.
이 부분을 일일이 복붙해주면 되겠지만,, 만약 페이지가 10개가 넘어간다면 뭐하러 그렇게 하나!

layout.js

이럴 때 이용해주는 것이 layout.js 이다.

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="navbar">
          <Link href="/">HOME</Link>
          <Link href="/list">LIST</Link>
        </div>
        {children}
      </body>
    </html>
  );
}

간단히 body 사이에 넣어주면, 어느 페이지를 이동하든 상단에 고정되는 모습을 볼 수 있다.
component로 따로 관리하던 것과 비슷하지만 쉬운 느낌??

이미지 삽입 🏞

`<Image />`

디렉토리 사진

import Image from 'next/image'

export default function Home() {
  return(
    <div>
      <Image />
    <div/>
)}

물론 리액트에서 쓰듯 <img src~~/> 써도 된다.
public 폴더 안에 있는 사진을 쓰려면 /부터 시작하면 됨.
근데 성능과 속도가 중요하다면 이미지 넣을 때 태그 씀.
그럼 자동으로 이미지 lazy loading & 사이즈 최적화 & layout shift 방지를 해준다.

참고 : https://scarlett-dev.gitbook.io/all/it/lazy-loading
https://sangwonny.tistory.com/57

import Image from 'next/image'
import 이미지 from './food0.png'

export default function Home() {
  return(
    <div>
      <Image src={이미지} alt="설명"/>
    <div/>
)}

이미지를 상단에서 import 해온 뒤에 그걸 넣어야 한다.
사이즈나 스타일을 조정하려면 알다시피<Image /> 내 에서 width="100px" 요런 식으로 추가해주면 됨

외부링크사진

import Image from 'next/image'

export default function Home() {
  return(
    <div>
      <Image src="https://s3.amazonaws.com/my-bucket/profile.png" width="500" height="500"/>
    </div>
)}

내가 다른 사이트에 올려놓은 사진을 가져오려면

width, height 옵션을 넣어주어야 함
fill="true" 이거 대신 넣고 부모 <div>가 width, height를 대신 조절해도 됨

내 저장소가 아닌 다른 URL에서 가져오고 싶으면 따로 셋팅도 해놔야합니다.
https://beta.nextjs.org/docs/optimizing/images#remote-images

그러니까,

<div>
   <Image src="https://cdn.pixabay.com/photo/2021/10/14/03/19/tomato-6707992__340.png"
          width="500"
          height="500"
   		/>
</div>

이런 pixbay에 있는 사진 하나를 불러오려면, 이렇게만 적으면 안된다.
정적파일의 접근은 상관없지만 나는 외부 서버의 이미지를 가져와야하기 때문에 도메인 설정이 필요함

Error: Invalid src prop (https://cdn.pixabay.com/photo/2021/10/14/03/19/tomato-6707992__340.png) on next/image, hostname "cdn.pixabay.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

귀찮으니 외부 사이트 이미지들은 그냥 <Image>말고 <img> 태그 쓰는게 편함

간단한 map

{grocery.map((a, i) => {
  	return (
    		<div className="food" key={i}>
             	<img src={"food" + i + ".png"} width={50} />
  			 	{a} $40
			</div>
			);
	})}