[6/1] Next.js 마이그레이션 하기

릿·2023년 6월 1일
0

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

  1. 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>
  );
}
  1. app폴더 안의 index.tsx를 page.tsx로 바꿔주자.

지금 당장은 이 정도로도 충분하기 때문에 이제 redux환경 구축을 할 예정이다.

profile
새로운 도전과 재미를 추구하는 1년차 프론트엔드 개발자

0개의 댓글

관련 채용 정보