1. Next.js 마이그레이션하기
App router는 React 최신기능을 사용하여 앱을 구축하기 위해 등장했다.
Next.js 공식문서에 의거하여 pages디렉토리 구조에서 app디렉토리 구조로 마이그레이션을 진행해보자!
1. 이전 버전과 비교해서 바뀐 점
- Server Components / Suspense를 사용할 수 있음
- 중첩된 경로와 레이아웃을 지원함
- pages폴더 안 index.js => app폴더 안 page.js로 바뀜
- components, styles, tests폴더 및 관련 파일을 app폴더 안에 배치할 수 있음
- next/head가 Metadata로 대체됨
before
after
- pages/_app.js와 pages/_document.js가 app/layout.js으로 대체됨
- pages/_error.js가 error.js파일로 대체됨
- pages/404.js가 not-found.js파일로 대체됨
- 데이터 패치 함수인 getServerSideProps / getStaticProps가 getStaticPaths / generateStaticParams로 대체됨
2. 마이그레이션 과정
1. Next.js 최신버전을 설치해준다. + ESLint
Next.js 13.4버전 이상이어야 App router가 동작한다.
npm i -D next@latest
ESlint를 사용한다면 ESLint버전도 업그레이드 해주자.
npm install -D eslint-config-next@latest
- pages폴더를 app폴더로 바꾸고, _app.tsx와 _document.tsx를 layout.tsx로 합쳐준다.
(지금 내 프로젝트에서는 _document파일을 사용하고 있지 않음)
before
// pages/_app.tsx
import Head from "next/head";
import type { AppProps } from "next/app";
import "../styles/index.scss";
const MyApp = ({ Component }: AppProps) => {
return (
<>
<Head>
<meta charSet="utf-8" />
<title>mySum</title>
</Head>
<Component />
</>
);
};
export default MyApp;after
// app/layout.tsx
import React from "react";
import { Metadata } from "next";
import "../styles/index.scss";
import Menu from "../components/common/Menu";
interface RootLayoutProps {
children: React.ReactNode;
}
export const metadata: Metadata = {
title: "mySum",
description: "Welcome to mySum!",
};
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="ko">
<body>{children}</body>
<Menu />
</html>
);
}- app폴더 안의 index.tsx를 page.tsx로 바꿔주자.
지금 당장은 이 정도로도 충분하기 때문에 이제 redux환경 구축을 할 예정이다.
새로운 도전과 재미를 추구하는 1년차 프론트엔드 개발자