App Router

App Router는 Page Router랑 변경되거나 추가되는 상황이 있습니다.

변경되거나 추가되는 상황

• React 18 신규 기능 추가
• 데이터 페칭 방식 변경
• 레이아웃 설정 방식 변경
• 페이지 라우팅 설정 방식 변경

하지만 변경되는 것만 있는것이 아닙니다.

크게 변경되지 않는 사항

• 네비게이팅 (Navigating)
• 프리페칭 (Pre-Fetching)
• 사전 렌더링 (Pre-Rendering)

App Router 생성

npx create-next-app@latest 파일명

으로 만들어줍니다.

2. Need to install the following packages:
   create-next-app@15.2.3
   Ok to proceed? (y)
   Create Next App 버전을 15 버전으로 설치를 하는지 물어보는 질문이 나옵니다.

3. ? Would you like to use TypeScript? » No / Yes
   타입 스크립트를 사용할 것인지

? Would you like to use ESLint? » No / Yes
ESlint를 사용할 것인지

? Would you like to use Tailwind CSS? » No / Yes
Tailwind CSS를 사용할 것인지

√ Would you like your code inside a src/ directory? ... No / Yes
src/ directory를 사용할 것인지

? Would you like to use App Router? (recommended) » No / Yes
App Router를 사용할 것인지

App Router 구성

Next.js 역시 Node.js 패키지를 기반으로 만들어지기 때문에 node_modules, pakage.json, package-lock.json이 존재합니다.

Page Router와 비슷하게 publick 폴더, src 폴더, next.config.mjs(next앱의 옵션 설정) 파일이 존재합니다.

App Router에서는 Page Router를 활용하지 않기 때문에 pages 폴더는 존재하지 않고 App Roouter를 활용하기 때문에 app이라는 폴더가 존재합니다.

Next.js 15.0.3 버전 부터 주의

ESlint 관련 설정이 엄격하게 변경되었습니다.
any 타입을 명시적으로 지정하거나 또는 사용하지 않는 변수를 선언해 둘 경우 오류가 발생합니다.
이 부분을 없애기 위해
eslintrc.config.mjs 파일을 수정하면 됩니다.

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    // 이 부분이 추가
    rules: {
      "@typescript-eslint/no-unused-vars": "off",
      "@typescript-eslint/no-explicit-any": "warn",
    },
  },
];

export default eslintConfig;

rules에 추가한 옵션 별 의미는

@typescript-eslint/no-unused-vars: "warn": 사용하지 않는 변수가 있을 때 경고로 표시
"@typescript-eslint/no-explicit-any": "off": any 타입을 명시적으로 정의할 수 있도록 허용