[Nextjs] Nextjs 시작하기 - (1) 설치, 디렉토리 구조

1. 설치

npx create-next-app

명령어를 입력해 설치를 하면 prompt에 다음과 같은 질문들이 나온다.

 

대부분의 질문들은 기본값대로 엔터만 치면 된다. ESLint와 Tailwind는 나중에 따로 설치하려면 귀찮으므로 웬만하면 그냥 Yes를 하는 편이다.

그런데 아래 질문들은 Nextjs의 설정에 큰 영향을 주므로 취향에 따라 잘 선택해야 한다.

 

일단 나는 튜토리얼을 학습하는 입장에서 다음 같은 선택을 했다.

• Would you like to use `src/` directory? No / Yes
• Would you like to use App Router? (recommended) No / Yes
• Would you like to customize the default import alias? No / Yes
• What import alias would you like configured? @/*

 

Would you like to use `src/` directory?
- 프로젝트의 상위에 바로 pages, components 폴더들이 존재하게 할건지, 아니면 react처럼 src 폴더 아래에 파일을 위치시킬 건지 선택

 

Would you like to use App Router?
- Nextjs 13의 실험적인 기능인 app router 기반 방식을 사용할 것인지 질문하는 건데, 업데이트된지 얼마 안 된 기능이기 때문에 많은 강의들이 pages 폴더를 기반으로 한 설명을 하고 있다. 이런 과도기적 상태에서는 자료도 얼마 없고, 레거시를 보수하는 상황을 대비해 pages 기반으로 먼저 배우기로 했다. No 선택.

 

 

2. 디렉토리 구조 및 파일 설명

1) pages 폴더

nextjs는 pages 폴더에 들어있는 파일을 기반으로 라우팅을 한다. about.tsx 파일은 /about이 되는 식.

• _app : nextjs 실행의 진입점과 같은 역할을 하는 파일. 지워도 상관없지만 전역적으로 적용할 사항이 있다면 이 파일이 필요하다.
  React에서 index.js나 App.js와 역할이 비슷한데, react-router-dom의 Outlet 기능으로 Layout 설정하고 global style을 설정하는 것처럼 Layout 설정, title, meta 태그 설정, global style 파일을 import 하는 등의 코드를 여기에 작성한다.
• index.ts : / 경로에 해당하는 파일

pages 폴더로 라우팅 하기

• /products/fruits 경로의 페이지를 만들고 싶다면, pages 폴더 아래에 products 폴더를 만들고 fruits.tsx 파일을 만들면 된다. 이 상황에서 /products 페이지는 products 폴더의 하위에 index.tsx를 만들어 생성할 수 있다.
• nextjs를 설치할 때 기본적으로 api 폴더 하위에 hello.ts 예제가 들어있는데, http GET 요청에 대한 값을 반환하는 코드라는 것을 알 수 있다. 이렇게 nextjs는 서버리스 API를 만드는 방법을 제공한다. 이렇게 만든 API 는 브라우저에서 /api/hello를 입력해 조회하거나 nextjs에서 fetch 할 수도 있다. 자세한 설명은 공식 문서의 API Routes 참조

2) public 폴더

static 파일 (폰트, 이미지) 넣는 곳

 

3) 그 밖에 styles, components, hooks 등

그 외에 필요한 폴더를 만드는 것은 자유다. React와 마찬가지로 components, styles, hooks, redux 등의 폴더를 취향껏 만들면 된다.