App router는 React 최신기능을 사용하여 앱을 구축하기 위해 등장했다.
Next.js 공식문서에 의거하여 pages디렉토리 구조에서 app디렉토리 구조로 마이그레이션을 진행해보자!
Next.js 13.4버전 이상이어야 App router가 동작한다.
npm i -D next@latest
ESlint를 사용한다면 ESLint버전도 업그레이드 해주자.
npm install -D eslint-config-next@latest
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>
);
}
지금 당장은 이 정도로도 충분하기 때문에 이제 redux환경 구축을 할 예정이다.