2. Next.js - Pages, Layout

Pages

pages/index.js => /
pages/ssg.js => /ssg 
pages/products/[slug].js => /products/*

Pre-renders 와 SEO

Next.js는 모든 페이지를 기본적으로 Pre-renders 한다.

No-pre-rendering (기본 React)

Pre-rendering

CSR만 제공한다면,
Client(브라우저) 처럼 동작하지 않는 검색엔진의 경우 아무런 데이터도 조회해갈 수 없다.
Pre-render를 해두면 Client 처럼 동작하지 않는 검색엔진에게 필요한 데이터를 제공 할 수 있다.

Pre-render 방식

SSG(recommended) & SSR
SSG는 빌드 타임에 pre-render

• Page의 내용물이 외부 데이터에 의존적인 상황 -> getStaticProps
• Page Paths 까지 외부 데이터에 의존적인 상황 -> getStaticProps, getStaticPaths

SSR은 요청 타임에 pre-render

Layout

하나의 공통된 Layout을 쓰는 경우

components/Layout.js
컴포넌트 하나를 pages/_app.js 에서 활용

pages/_app.js

import Layout from '../components/Layout';

export default function App({ Component, pageProps }) {
	return (
		<Layout>
			<Component {...pageProps} />
		</Layout>
	);
}

여러개의 Layouts을 활용하고 싶은 경우

components/SubLayout.js
Page.getLayout에 getLayout 함수를 제공

pages/index.js

import Layout from '../components/Layout';
import SubLayout from '../components/SubLayout';

export default function Page() {
	return (
		<>
			<h1>Hello</h1>
		</>
	);
}

// getLayout property
Page.getLayout = function getLayout(page) {
	return (
		<Layout>
			<SubLayout />
			{page}
		</Layout>
	);
};

components/_app.js

import Layout from '../components/Layout';

export default function App({ Component, pageProps }) {
	// 페이지에 다른 레이아웃이 있으면 적용
	const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);

	return getLayout(<Component {...pageProps} />);
}

pages/_app.js 활용해서 공통화할 수 있다.