15.Next.js
Updated:
1.소개 및 페이지 레이아웃
- react 기반의 framework 로써 폴더 및 파일명 기반으로 routing 을 지원하고, SSR(Server Side Rendering) 을 지원합니다.
설치
npx create-next-app 폴더명
-
create-next-app으로 설치하면-
컴파일과 번들링이 자동으로 된다 (webpack 과 babel)
-
자동 리프레쉬 가능으로 수정하면 화면에 바로 반영됩니다.
-
서버사이드 렌더링이 지원됩니다.
-
Static 파일을 지원합니다
-
페이지 레이아웃
1._App.js
-
레이아웃을 만들기 위해서는 _app.js 를 이용합니다. 모든 pages 는 _app.js 를 통해서만 만들 수 있습니다. _app.js 를 이용하면
-
페이지 전환시 레이아웃을 유지할 수 있고, 상태값을 유지 할 수 있습니다.
-
componentDidCatch 를 이용해서 custom error handling을 할 수 있습니다.
-
추가적인 데이터를 페이지로 주입시켜주느게 가능합니다.
-
Global CSS 를 이곳에 선언합니다.
-
2. _document.js
- Next 에서 제공하는 document 를 customizing 할 수 있습니다. next.js 페이지들은 마크업 정의를 건너띠기 때문에 html, head body 등의 tag 가 필요 할 때는 이러한 document.js 파일에다가 구조를 정의 해줘야 합니다.
// _document.js 예시
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
🔶 🔷 📌 🔑
Reference
- Next.js official page - https://nextjs.org/ {:target=”_blank”}
Leave a comment