Nextjs

page router

_app.js

• root컴포넌트의 역할을한다고 생각해도 무방.
• Component 는 pages 하위의 페이지 컴포넌트들, pageProps들은 data fetching을 해서 가져온 결과값들이다.

_document.js

• css-in-js(styled components) 같은 걸 서버사이드 렌더링할때 돕는 역할.
• 하지만 앱라우터에선 사용하지 않는걸 추천(테일윈드 권장중)

커스텀 에러 페이지(404.js 파일 생성)

• pages 디렉토리 하위에 생성해놓으면 에러발생시 저기로 가게됨

App Router

라우팅

• 폴더명(url이름)/page.js 와 같이 생성한다

동적 라우팅

• 생성하고자 하는 라우터 하위에 폴더로 [쿼리이름]/page.js 로 생성해준다. 그리고 page.js에서 props를 받아 내부에서 params를 다루면 된다.

// app/posts/[postId]/page.js
const DetailPost = (props) => {
  const { params } = props;
  const { postId } = params;
  return <div>DetailPost: {postId}</div>;
};

export default DetailPost;

// 결과 : localhost:3000/posts/123 일때, DetailPost: 123 이라는 화면이 렌더링된다.