App Router

Next.js 13과 함께 소개된 새로운 라우터 방식입니다. app 폴더 아래에 원하는 경로를 작성하면 자동으로 라우팅이 가능합니다.

만약 /community라는 경로를 만들고 싶으면 /app/community/page.js를 생성하면 됩니다.

/community -> /app/community/page.js
/community/developer -> /app/community/developer/page.js

React의 경우 react-router-dom을 설치하고 직접 라우터 설정을 해줘야하는데, Next.js의 경우 파일 구조를 통해 자동으로 라우팅을 해주는 시스템으로 굉장히 쉽게 라우터를 설정할 수 있습니다.

File

Next.js에서는 File 컨벤션을 제공합니다.

• layout
• page
• loading
• not-found
• error
• global-error
• route
• template
• default

해당 컨벤션을 지키면서 파일을 작성하면 에러가 일어났다고 가정했을 때, 같은 경로 안에서 작성된 error.js 파일이 실행되게 됩니다.

Layout

• root layout : app 폴더 안의 가장 최상단에 위치한 layout으로 필수로 설정
• 원하는 경로 폴더 안에서 layout을 작성하게 된다면 해당 경로는 자동으로 layout이 적용됩니다.
  

Loading

React의 Suspense를 활용하여 loading UI를 작성할 수 있습니다.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

Dynamic Routes

Next.js에서 동적 라우트를 설정하려면 폴더명을 [foldername]로 작성하면 됩니다.

예를 들어 블로그의 포스트 페이지가 있다고 가정했을 때
포스트의 ID를 사용하여 동적 라우트를 설정하는 경우 아래의 코드처럼 작성할 수 있습니다.

/app/post/[id]/page.js

export defualt function PostPage({ params }){
  return (
    <h2>Post Id: {params.id}</h2>
  )
}

Project Organization

프라이빗 폴더

라우팅이 되지않는 폴더를 만들고 싶다면 _folderName로 작성하면 됩니다.
그 안에서 Next.js의 파일 컨벤션에 맞게 파일명을 작성해도 라우팅이 되지 않습니다.

컴포넌트

컴포넌트를 작성하는 경우 app 안에서 components 폴더를 생성해 컴포넌트를 작성해도 Next.js에서 제공하는 파일 컨벤션에 해당하지 않으면 라우팅이 되지 않습니다.

컴포넌트를 작성할 때 어떤 폴더에서 작성하면 좋을지 고민될 것 같은데 개인의 취향대로, 팀의 의견에 맞춰 적절한 방향으로 진행하면 될 것 같습니다.

유데미에서 Next 강의를 듣고 있는데 강사님은 app안에서 components 폴더를 생성해서 작성하기 보단 app 밖에서 components 폴더를 생성하는 방식을 선호하신다고 하셨습니다. 이 방법이 라우팅되는 폴더와 분리하여 코드를 파악하는데도 편하다고 생각이 들었고 앞으로 Next 프로젝트를 진행하는 경우 해당 방법으로 진행할 것 같습니다.