[Next.js 13] 프로젝트 폴더/파일 구조 이해하기

# Next.js 13 프로젝트 (폴더/파일) 구조

Next.js 13 프로젝트를 설치하면, 기본적으로 아래와 같은 프로젝트 구조를 갖게 된다.

 

• 최상위 루트 폴더
  • /app 폴더
  • /public 폴더
  • /src 폴더(Optional)
  • /.next 폴더
  • /node_modules 폴더
• 최상위 루트 파일
  • Next.js 설정 파일들
    • next.config.js 파일
    • .next-env.d.ts 파일
    • .env 파일
  • 그외 환경 설정 파일들
    • package.json 파일
    • .gitignore  파일
    • tsconfig.json 파일
    • .eslintrc.json 파일

 

[ VS Code 상에서 본 프로젝트 구조 ]

 

# Next.js 13 폴더/파일의 구조 및 역할

각 폴더와 파일의 역할에 대해서 간단하게 살펴보면 다음과 같다.

 

1. 최상위 루트 폴더

최상위 루트 경로( `/` )에는 아래와 같은 폴더들이 기본으로 생성된다.

 

• /app 폴더
  • Next.js 13부터 도입된 App Router의 라우팅을 위한 핵심 폴더.
  • 라우팅을 위한 폴더와 파일(page.tsx, layout.tsx, route.ts 등)들이 /app 폴더 안에 위치하게 된다.
  • 예를 들어, `app/page.tsx` 파일은 `http://localhost:3000/` 으로 접속하는 페이지가 된다.
• /public 폴더
  • Static Asset(이미지 등) 이 저장되는 폴더
  • 이 폴더 안에 있는 파일을 참조할 때는 `/public` 경로를 생략하고 `/` 경로부터 시작하여 접근하면 된다.
• /src 폴더(Optional)
  • Next.js 프로젝트 설치시 `/src`디렉토리를 사용하기로 설정하면 생성된다.
  • 이 폴더 안에 `/app` 폴더도 들어가게 된다.
  • 라우팅을 위한 파일(page.tsx 등) 외에 컴포넌트, 유틸 함수 등을 이 폴더 안에 주로 작성한다.
  • 만약 middleware.ts 를 사용한다면, 이 경로에 위치 해야 한다.
• /.next 폴더
  • `npm run build` 명령어를 통해 프로덕션용 코드로 빌드된 파일들이 저장된다
  • `npm start`를 통해 프로덕션 모드로 서버를 구동하면, 이 폴더에 있는 코드들이 사용된다.
• /node_modules 폴더
  • NPM Package 들이 실제로 설치되어 있는 경로이다.

 

2. 최상위 루트 파일

최상위 루트 경로 (` / `)에는 아래와 같은 파일들도 기본으로 생성된다.

 

• Next.js 설정 파일들
  • next.config.js 파일
    • Next.js 설정 파일이다.
    • 외부 이미지 사용 설정, 실험적 기능 설정을 이 파일에서 세팅한다 (글 하단에 상세 설명)
  • .next-env.d.ts 파일
    • Next.js 용 TypeScript 설정 파일로, 건드리면 안 된다고 적혀있으므로 개발자가 신경쓸 필요 없다.
  • .env 파일
    • 환경변수 파일이다. ( 참고글 링크 )
    • 우선순위가 필요한 경우, `.env.local`, `.env.production`, `.env.development` 등을 추가할 수 있다.
• 그 외 환경 설정 파일들
  • package.json 파일
    • 프로젝트 설정 파일로, 프로젝트 이름, dependecy, script 등이 정의되어 있다.
  • .gitignore  파일
    • git 추적에서 제외할 파일, 경로를 기록하는 파일이다.
  • tsconfig.json 파일
    • Typescript 설정 파일이다.
    • import alias 세팅도 이 파일에 설정 된다.
  • .eslintrc.json 파일
    • ESLint 설정 파일이다.

 

참고로 middelware.ts 파일을 사용하는 경우,

- 루트 ( `/` ) 경로에 위치하는게 디폴트이지만,

- 만약 `/src` 폴더를 사용하도록 설정했다면, `/src` 폴더 내부에 위치해야 한다.

---

이 중, next.config.js 파일을 잠깐 살펴보자. (실제로 사용할 일이 종종 있다.)

 

1. 외부 이미지 경로 설정

- Next.js 에서는 외부 이미지를 사용하는 것을 기본적으로 차단한다.

- 따라서, AWS S3 등의 외부 이미지를 사용한다면, 해당 경로를 next.config.js 파일에 별도로 설정 해주어야 한다.

 

2. 실험적 기능 사용 설정

- 또한 Next.js 에서 제공하는 실험적 기능(Server Action 등)을 사용하려면,  이 파일에 설정해줘야 한다.

 

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 실험적인 기능(Server Actions 등) 설정
  experimental: {
    serverActions: true,
  },
  // 외부 이미지(AWS S3 등)사용 경로 설정
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
};

module.exports = nextConfig;

---

프로젝트의 전체적인 구조를 알고 시작하면 도움이 될 것 같아 정리해둔다.