반응형
_app.js
'./pages/_app.js' 파일을 만들 경우 Next.js 어플리케이션의 시작페이지 (App component)를 커스텀화할 있습니다.
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
App component는 앱이 시작할 때 가장 먼저 호출되며, 라우팅도 이 페이지에서 내부적으로 작동하면 되기 때문에 앱의 글로벌한 작업들을 수행하기에 좋습니다.
일반적인 사용예
- 페이지 전환 시에도 전체 레이아웃을 유지하고 싶을 경우
- 페이지 전환 후에도 state를 유지하고 싶을 경우
- componentDidCatch을 사용하여 커스텀한 에러 처리를 하고 싶은 경우
- 페이지에 추가적인 데이터를 삽입하고 싶은 경우
- 글로벌한 CSS를 적용하고 싶은 경우
유의사항
- _app.js에 'getInitialProps'를 추가할 경우, 정적 생성 (static generation)이 없는 페이지의 자동 정적 최적화 (Automatic static optimization)가 비활성화됩니다.
- _app.js에 'getInitialProps'를 추가할 경우, 반드시 'import App from "next/app"'을 해서 'getInitialProps' 내에 있는 'App.getInitialProps(appContext)'를 호출하고 리턴된 object를 return value와 병합합니다.
- App component는 'getStaticProps'나 'getServersideProps'를 지원하지 않습니다.
_document.js
'./pages/_document.js' 파일을 만들 경우 앱의 html 문서를 커스텀화할 수 있습니다.
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페이지가 제대로 렌더링되려면 <Html>, <Head>, <Main>, <NextScript>를 반드시 포함해야 합니다. 여기서 적용되는 Head tag는 각 페이지가 아니라 모든 페이지에 적용됩니다.
일반적인 사용예
- 글로벌 커스텀 스타일 시트 로드 (ex: Material UI, Bootstrap 등)
- 글로벌 Head
유의사항
- Document는 서버에서만 렌더링되므로 onClick과 같은 이벤트 처리가 작동하지 않습니다.
- Document의 getInitialProps 함수는 client-side 전환 동안 호출되지 않습니다.
- Document에는 'getStaticProps'나 'getServerSideProps'를 적용할 수 없습니다.
_error.js
'./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
반응형
'프로그래밍 > web' 카테고리의 다른 글
| Next.js getInitialProps 제대로 알고 사용하기 (0) | 2021.07.07 |
|---|---|
| Nextjs 환경 변수 (environment variable)를 server와 client에 모두 적용하는 방법 (0) | 2021.06.28 |
| XHR? AJAX? 정확한 의미를 알아보자. (0) | 2021.06.16 |
| Next.js - getStaticProps vs. getServerSideProps, 차이와 활용 (0) | 2021.05.11 |
| SSR (Server Side Rendering) vs SPA (Single Page App), 내 앱은 뭘로 개발해야 할까? (0) | 2021.03.04 |
댓글