1. package.json 수정하기
1-1. react-scripts , react-router-dom 제거 (react, react-dom 은 유지)
1-2. next 설치
1-3. script 에 next 관련 명령어 추가
- next dev : localhost:3000 에서 dev mode 서버 동작
- next build , next start : production mode
2. Static Assets and Compiled Output
2-1. CRA 에서는 public 폴더를 entry HTML file 로 사용하지만 Next.js 에서는 정적 자원을 위해 사용한다. 따라서 기존 image, font 등의 정적 자원을 public 폴더로 이동시킨다.
2-2. index.html 을 Next.js 로 변경한다.
- <head> 태그를 _document.js 파일로 이동
- 페이지간 재사용되는 레이아웃은 _app.js 파일로 이동
2-3. .next 파일을 gitignore 에 추가한다.
Custom Document
- 페이지를 렌더링하기 위해 사용되는
<html>,<body>태그를 업데이트 할 수 있다. - 해당 파일은 서버에 의해서만 렌더링되기 때문에 이벤트 핸들러는 사용될 수 없다.
- default Document 를 덮어쓰기 위해 pages 폴더 하위에
_document.js파일을 추가한다.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}<Html>,<Head />,<Main />and<NextScript />는 필수 구성 요소
Custom App
- Next.js 는 페이지들을 초기화하기 위해 App Component 를 사용한다. 따라서 App 을 override 하여 페이지 초기화를 컨트롤 할 수 있다.
- 페이지 변화 간 레이아웃 유지하기- 페이지 탐색 시 state 유지
componentDidCatch를 사용한 error handling- 페이지에 추가적인 데이터 주입
- global CSS 추가
// import App from 'next/app'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyAppComponentprop 은 활성화된page에 해당pageProps는 초기 props 에 해당하는 객체
3. Creating Routes & Linking
CRA 에서는 React Router 라는 서드파티 라이브러리를 사용하지만 Next.js 는 페이지 라우팅을 파일 시스템을 기반으로 제공한다.
pages라는 폴더에 파일이 추가되면 자동으로 라우터가 된다.
-Route Component 를 pages 폴더 하위로 이동시킨다.
Index routes
pages/index.js→/pages/blog/index.js→/blog
Nested routes
- nested 한 폴더 구조가 nested router 를 만들어낸다.
pages/blog/first-post.js→/blog/first-post
Dynamic route segments
- bracket syntax 를 사용하여 파라미터를 설정해준다.
pages/blog/[slug].js→/blog/:slug(/blog/hello-world)pages/[username]/settings.js→/:username/settings(/foo/settings)pages/post/[...all].js→/post/*(/post/2020/id/title)
4. Safely Accessing Web APIs
- Next.js 는 서버에서 미리 렌더링하기때문에 window, localStorage, navigator 등의Web API 에 안전하게 접근하기 위해선 client-side 일때만 가능하도록 설정해주어야한다.
- Next.js 에서는 Web API 를 useEffect 내부에서 사용하라고 추천한다.
5. Search Engine Optimization
- CRA 에서는 주로
react-helmet라는 서드파티 라이브러리를 사용하여 meta tag 를 추가하지만 Next.js 에서는next/head를 사용한다.
프론트가 좋아요