Next.js는 React용 SSR 프레임워크이다.
next 명령어를 통해 프로젝트를 실행하면 위에서 말한 export를 통해 빌드 시점에 미리 Page들을 파악하고 이를 각 HTML로 생성해놓는다.
next export 명령어로 routing 경로로 정적 웹사이트를 만들 수 있는 기능도 제공하고 있다.
Next.js의 기본 구조
Next.js의 기본 구조는 다음과 같다.
pages/ // HTML Document, Application Container, 각종 페이지 등을 작성한다.
_document.js // HTML Document.
_app.js // Application Container. 공통의 레이아웃을 작성한다.
_error.js // Error Page.
index.js // Root Page /로 시작되는 경로를 말한다.
hello.js // Hello Page /hello로 시작되는 경로를 말한다.
static/ // 정적 파일 (이미지, 파일 등)을 업로드 한다.
next.config.js // Next.js의 환경 설정 파일이다. 라우팅 설정, typescript, less 등의 webpack 플러그인을 설정한다.이와 같이 웹 페이지를 랜더링하려면 기본적으로 pages directory 내부에 index[.js|.ts|.tsx|.jsx]파일이 존재해야 한다.
또한, _app, _document, _error 파일들을 통해 보다 편리하게 기본 레이아웃이나 에러 페이지 등을 작성해 사용할 수 있다.
_document
_document.js는 SPA에서 시작되는 index.html라고 생각하면 된다.
기본적으로 Next.js에서 기본 값으로 설정되어 있어 따로 작성을 해주지 않아도 되며 Document를 커스텀할 때만 작성해주면 된다.
커스텀 Document에는 next/document의 <Html>, <body>,<Main>, <NextScript> 태그를 반드시 작성해주어야 한다.
작성 예시는 다음과 같다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument_app
React에서 App.js라는 이름의 파일로 공통의 레이아웃을 작성하듯 Next.js에서는 pages/_app.js를 통해 해당 어플리케이션의 공통 레이아웃을 작성할 수 있다.
또한, _app.js에서 Global CSS를 추가하거나 componentDidCatch를 통한 사용자 정의 오류 처리를 진행할 수 있다.
작성 예시는 다음과 같다.
// import App from 'next/app'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
//
// return { ...appProps }
// }
export default MyAppProps로 전달되는 Component는 경로에 따라 랜더되는 page들이다. 기본 경로에서는 pages/index.js로 전달받는다.
pageProps는 Date Fetch 메소드 중 하나를 통해 미리 로드된 페이지의 initial props가 포함되어 있는 Object이다.
_error
404 Error가 발생할 때 404페이지를 랜더링 한다면 SSR 환경에서 로드가 증가함에 따라 Cost가 증가하고 느려질 수 있다.
따라서, Next.js에서는 기본 정적 404 Error 페이지를 제공한다.
pages/404.js 파일을 통해 404 Error 정적 페이지를 생성할 수 있는데 그 외의 에러는 pages/_error.js를 통해 정적 페이지를 제공한다.
작성 예시는 다음과 같다.
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: 'An error occurred on client'}
</p>
)
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}
export default Error위와 같이 statusCode를 Props로 받아 적절하게 이용하면 404.js를 따로 사용하지 않고 _error.js로 에러 페이지를 정적으로 사용할 수 있는 것 같다.
