Next.js 에는 파일 시스템 기반의 라우터 기능을 제공하며, App Router와 Page Router가 있다.
Next.js 13이전에는 보통 Pages Router를 사용했지만, Next.js 13 이후 App Router를 권장하고있다.
App Router
app 디렉토리 안에 모든 파일을 추가하여 관리할 수 있다.
Page.js 또는 router.js라는 이름으로 작성된 파일만 경로로 사용할 수 있기 때문에 다른이름으로 생성하게되면 Page router 와 같이 새로운 경로가 생기지는 않는다.
App
├ login
│ └ page.js /* /login 경로의 페이지가 생긴다.*/
└ signup
└ router.js /* /signup 경로의 페이지가 생긴다.*/1. layout.js
레이아웃은 여러 페이지간에 공유되는 UI이다.
1-1.root layout
app 디렉토리 최상위에 위치한 레이아웃을 root layout이라고 부른다.
이 루트 레이아웃은 필수적이며 어플리케이션에 있는 모든 페이지에 적용된다.
이 루트 레이아웃은 반드시html,body태그를 포함해야한다.
- 이 루트 레이아웃만
html,body태그를 가진다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
이 루트 레이아웃은
_app.js,_document.js파일을 대체한다.
Pages Router
파일 시스템을 기반으로 한 간단한 라우팅 시스템이다.
프로젝트의 pages 디렉토리 내에 있는 각 파일이 해당 경로에 대응된다.
App
├ login.js /* /login 경로의 페이지가 생긴다.*/
└ signup.js /* /signup 경로의 페이지가 생긴다.*/동적인 겅로를 만들고 싶으면 [name].js 같이 대괄호로 감싸 동적 경로를 사용할 수 있다.
App
├ login
│ └ page.js /* /login 경로의 페이지가 생긴다.*/
└ write
└ [writeId].js /* /write/~ 경로의 페이지가 생긴다.*/1.index.js
애플리케이션의 루트 경로("/") 페이지다.
2._app.js
공통 레이아웃과 전역상태를 관리하는 페이지다.
보통 프로젝트의 최상위 컴포넌트 역할을 한다.
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import InitMocks from '@/mocks'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import { Provider } from 'react-redux'
import wrapper from '@/store'
InitMocks()
function MyApp({ Component, ...rest }: AppProps) {
const { store, props } = wrapper.useWrappedStore(rest)
return (
<>
<Provider store={store}>
<Component {...props.pageProps} />
</Provider>
<ToastContainer />
</>
)
}
export default MyApp3._documents.js
SSR 시 사용되며 초기 HTML과 CSS의 구조를 정의한다.
전체 페이지의 구조와 메타태그, 외부 스크립트, 글꼴등을 설정할때 사용한다.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang='ko'>
<Head />
<body>
<Main />
<div id='sidebar' />
<div id='modal' />
<NextScript />
</body>
</Html>
)
}
마무리
App Router는 복잡한 애플리케이션 라우팅 및 동적 라우팅을 위해 사용되고, 페이지 라우터는 간단한 페이지 간 전환 및 정적 컨텐츠 라우팅을 위해 주로 사용된다.
다들 프로젝트의 규모에 맞춰 router를 적절하게 사용하면 좋겠다.
