Next.js의 기본 구조는 다음과 같다.
|-- pages
| |-- _document // HTML Document, Application Container, 각종 페이지 등을 작성한다.
| |-- _app // Application Container. 공통의 레이아웃을 작성한다.
| |-- _error // Error Page._app
//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 }
// }
_app.js 는 client에서 띄우길 바라는 전체 컴포넌트의 레이아웃으로 이해하면 쉽다.
공통 레이아웃 이므로 최초에 실행되어 내부에 들어갈 컴포넌트를 실행한다.
- 지속적으로 띄울 레이아웃
- 페이지를 탐색 할 때 유지
- componentDidCatch 를 사용하여 사용자 정의 오류 처리
- 추가 데이터를 페이지에 주입
- 글로벌 CSS 추가
_document
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
- _document.js는 SPA에서 시작점이 되는 index.html 이라고 생각하면 된다.
- 서버에서만 렌더링되며 onClick과 같은 이벤트 핸들러가 동작하지 않는다.
- 시멘틱 태그를 구성하기 위해 _app.js에서 구성한 html body가 어떤 형태로 들어갈지 구성하는 곳
- nextJS 페이지들은 마크업 정의를 건너뛰고 페이지를 만들기 때문에 아래의 HTML을 수정하려 할때 이 파일로 수정 해야함
_error
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전역에서 Error 처리를 공통으로 하고자 할 때, 공통적으로 사용할 수 있는 Error Page
기술과 인문학의 교차점