[Next.js] 개념 간단 정리

Next.js 강의를 들으며 배운 개념들을 정리해보겠습니다

---

Routing

Routing ?

: url로 페이지를 나누는 것을 말함

 

Next.js 에서 Routing을 하기 위해선 (*App Router 버전)

1. app 폴더 안에 폴더를 만들고

2. 그 안에 page.jsx 파일을 만든다.

(* Next.js 는 app 폴더 안에 있는 폴더들을 자동으로 url 로 만들어 준다.)

 

 

Next.js 의 레이아웃 작동방식

(*App Router 버전의 Next.js 폴더 구조는 아래 이미지와 같다.)

▲ Next.js 는 page.js 를 보여줄 때, 옆에 layout.js 파일이 있으면

layout.js 내용 안에 page.js 내용을 담아서 보여준다.

(* layout.js의 {children} 이 page.js 넣을 곳을 표시하는 문법임)

 

+ 상위 폴더에 layout.js 가 또 있을 경우, 상위 폴더의 layout.js 안에 하위 폴더의 layout.js를 담아서 보여준다.

따라서 페이지마다 반복적으로 보여줘야 할 UI가 있으면 최상단 layout.js 파일에 작성하면 된다.

 

* App Router 에 대해 자세히 정리해 놓은 게시글

 

이미지 넣는 법

● <img /> 로 넣기

<img src="/port1.png" alt="설명"/>

: 이미지를 public 폴더에 넣고 가져다 쓴다.

/ 부터 시작해서 이미지 경로를 넣으면 된다. (public 폴더에 있는 것들은 사이트 발행 시 자동으로 사이트 root 경로로 이동됨)

 

 

● <Image /> 로 최적화된 이미지 넣기

: Next.js 가 제공하는 <Image /> 의 장점은

- 자동으로 이미지 lazy loading

- 사이즈 최적화

- layout shift 방지 (* layout shift = 이미지 로딩이 느리게 되어 화면 레이아웃이 갑자기 변경(밀리는)되는 현상)

 

1. 이미지를 직접 import 해온 뒤에 넣기 : width, height 옵션 입력 필요 X

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

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

 

2. 다른 사이트에 올려둔 이미지 넣기

→ width, height 옵션 입력 필수 (혹은 fill="true" 옵션 넣고 <div>가 width, height 를 대신 조절해도 됨)

→ 다른 URL 에서 가져오려면 next.config.js 파일에 따로 세팅을 해놓아야 한다.

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/>
)}

 

 

Dynamic Route

Dynamic Route 만드는 법 (App Router ver.)

1. app 폴더 안에 detail(작명) 폴더를 만든다.

2. detail 폴더 안에 [id](작명) 폴더를 만든다.

3. [id] 폴더 안에 page.js 를 만든다.

 

► /detail/[id]/page.js

/detail/아무문자 로 접속했을 때 page.js 를 보여준다.

 

 

유저가 URL 에 입력한 내용 가져오는 법

1. page.js 컴포넌트에 파라미터를 등록한다. (보통 'props' 라는 이름으로 등록함)

2. 파라미터를 props 라고 했을 때, props 를 출력해보면 아래와 같은 데이터가 출력된다.

{ params: { id: '' }, searchParams: {} }

3. [id] 값은 props.params.id 이런식으로 뽑아쓰면 된다.

 

 

<Link> 의 prefetching 기능

<Link href={'/list'}>링크</Link>

 

Next.js 에서는 <Link> 태그가 화면(= 뷰 포트)에 보이는 순간 자동으로 미리 로드해준다(= prefetching).

따라서, 링크를 클릭하면 대상 페이지의 코드가 이미 백그라운드에 로드되고, 페이지 전환이 거의 즉각적으로 이루어진다.

 

자동으로 미리 로드하는게 싫으면 prefetch 속성을 false 로 바꿔주면 된다.

<Link href={'/list'} prefetch={false}>링크</Link>