22.2.23 (수) +31days
Custom Server
https://nextjs.org/docs/advanced-features/custom-server
커스텀을 하면 Next.js의 장점을 살리기 어려움
Custom `App`
https://nextjs.org/docs/advanced-features/custom-app
페이지들의 공통화
pages/_app.js
Persisting layout between page changes / Keeping state / Global style getInitialProps를 여기서 사용하면 모든 페이지는 Static Optimization X
getStaticProps와 getServerSideProps는 지원 X
// 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 MyAppCustom `Document`
https://nextjs.org/docs/advanced-features/custom-document
pages/_document.js
html / body custom
next/document에서 꺼낸 Html Head Main NextScript
서버에서 실행되기에 onClick 같은 건 동작 X
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Custom Error Page
https://nextjs.org/docs/advanced-features/custom-error-page
pages/404.js
pages/500.js
pages/_error.js
next/error
`src` Directory
https://nextjs.org/docs/advanced-features/src-directory
Pages can also be added under src/pages as an alternative to the root pages directory.
The src directory is very common in many apps and Next.js supports it by default.
src 폴더에 pages를 둘 수 있음
단, public / next.config.js / tsconfig.json 등은 root에 있어야 함.
Multi Zones
https://nextjs.org/docs/advanced-features/multi-zones
하나의 파일 구조 안에 여러 개의 Next.js 앱을 두고 각 서비스가 url path 단위로 유지되도록 할 수 있음(like a monorepo)
(Vercel로 배포해야 간단히 사용 가능)
Measuring performance (성능 측정)
https://nextjs.org/docs/advanced-features/measuring-performance
_app.js에 reportWebVitals(metric) 함수 제공
web-vital 혹은 custom metrics의 소요 시간을 측정할 수 있음
정리 (Next.js 실제4)
Custom ⇒ Server / App / Document / Error Page
src Directory ⇒ src/pages 가능 단, pages가 없을 때
Multi zones ⇒ 여러 개의 next app로 하나의 도메인 구성
성능 측정 ⇒ reportWeVitals(metric)
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
댓글