Nextjs 개발 준비가 끝났으니 이제 Next.js 를 실행 할때 제일 먼저 실행 되는 파일들에 대해 정리 해보자.
CNA 후 생성된 Pages 폴더에 보면
_app.tsx , _document.tsx , _error.tsx가 있다.
(index.tsx 는 '/' 요청시 실행됨)
_app
_app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 한다.
최초 실행된 후, 내부에 컴포넌트가 있다면 전부 실행하고 HTML의 body 로 구성되어 모든 컴포넌트에 공통으로 적용할 속성 관리에 용이하다.
Component, pageProps를 Props 로 받는데 Component는 요청한 페이지이고, pageProps는 getInitialProps/getStaticProps/getStaticPaths/getServerSideProps를 통해 내려 받은 props들을 말한다.
(next v9 이상에서는 getInitialProps 대신 getStaticProps, getStaticPaths, getServerSideProps을 사용하도록 가이드 함.)
만약, _app에서 getInitialProps를 사용하고자 한다면, 꼭 App 객체를 불러온 후 getInitialProps를 통해 데이터를 불러와야 한다.
import App from 'next/app'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Myapp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps }
}_document
_app 다음에 실행되며, meta 태그를 정의하거나, body안에 들어갈 내용을 커스텀 할때 활용한다(모든페이지에 적용).
_document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성해야만 하며, 렌더 함수는 꼭 <Html>, <Head>, <Main>, <NextScript> 요소를 리턴해줘야 한다.
_document는 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않는다.
import Document, {
Html, Head, Main, NextScript, DocumentContext
} from 'next/document'
import { ServerStyleSheet } from "styled-components"
class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet();
const page = renderPage((App) => (props) =>
sheet.collectStyles(<App {...props} />)
);
const styleTags = sheet.getStyleElement();
return {
...page,
styleTags
};
}
render() {
return (
<Html>
<Head>
{/** FavIcon */}
{/** WebFont */}
{/** stylesheets */}
{/** scripts */}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
_error
전역에서 Error 처리를 공통으로 하고자 할 때, 공통적으로 사용할 수 있는 Error Page를 작성할 수 있다.
일반적인 _error.js 페이지는 500 에러가 발생 했을 때 나오는 Custom 에러 페이지로 에러코드에 따라 Custom하게 에러를 보여주는 것이 가능하다.
404 Error의 경우 static 파일로 제공을 해도 무방하지만, 다른 에러의 경우, 에러 상황을 서버에도 알려주거나 로그에 남겨야하는 경우가 많기 때문에 에러 페이지를 다음과 같이 관리하는게 좋다.
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;References
https://nextjs.org/docs/advanced-features/custom-app
https://merrily-code.tistory.com/154
