Next.js + TypeScript 시작하기 2

본 내용은 next.js 와 nextjs. + typescript 를 비교하기 위해 학습용 으로 작성되었습니다
아래 내용대로 따라하시면 기본적인 세팅과 nextJS + typescript 개발을 배우실 수 있습니다

이전글 : Next.js + TypeScript 시작하기

이번에는 생성한 프로젝트를 자세히 살펴보겠습니다.
프로젝트 생성은 이전글을 참고하여 보시기 바랍니다.

Next.js 프로젝트

파일구조

|-- .next
|-- node_modules
|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- next.config.js
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- README.md

1. .next
   -- npm run dev 실행시 생성되는 폴더와 파일

2. node_modules
   -- 설치된 npm modules 관련 폴더와 파일

3. pages
   -- 프로젝트에서 화면에 표시될 페이지 관련 폴더
   -- 페이지를 담당하는 컴포넌트
   ( Nextjs에서는 Routing 시스템이 파일구조로 되어있다. 그래서 pages 폴더에는 파일 이름과 구조에 나름대로 컨벤션이 존재한다. 예:_app.js 등, Routing 설명은 다음에~ )

4. public
   -- 프로젝트에 사용될 Static 한 파일들(이미지 파일 등)이 저장된 폴더

5. styles
   -- CSS 관련 폴더

6. .eslintrc.json
   -- ESLint 설정 파일

7. next.config.js
   -- Next.js 프로젝트 설정 파일

8. .gitignore
   -- git 버전 관리에서 무시하고 싶은 파일 이름을 기록하는 파일

9. package-lock.json
   -- 생성된 node_modules 폴더의 정보

10. package.json
    -- 사용하는 node_modules 정보
    -- 기본적인 프로젝트에 대한 명세

11. README.md
    -- 프로젝트 파일에 대한 정보

Next.js + TypeScript 프로젝트

파일구조

|-- .next
|-- node_modules
|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- .gitignore
|-- next-env.d.ts   <-- 추가 됨
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- tsconfig.json  <-- 추가 됨

Next.js + TypeScript 프로젝트는 Next.JS 프로젝트와 거의 비슷합니다.
다른점만 설명 하겠습니다.

1. .next
2. node_modules
3. pages
4. public
5. styles
6. .eslintrc.json
7. next.config.js
8. .gitignore
9. package-lock.json
10. package.json
11. README.md

11번 까지 내용 동일 합니다.

다른점

12. next-env.d.ts
    -- npm run dev 실행시 자동으로 생성됩니다.
    이 파일은 Next.js 유형이 TypeScript 컴파일러에서 선택되도록 합니다.
    제거할 수는 없지만 편집할 수는 있습니다(하지만 필요하지 않음).
    -- Next.js서 추천 설정한 TS로 만들고 싶으면 next-env.d.ts 편집

13. tsconfig.json
    -- npm run dev 실행시 자동으로 생성됩니다.
    -- Next.js에서 추천 설정 아닌 TS세팅을 커스텀하고 싶으면 tsconfig.json 편집

12,13 관련 내용 공식문서 참조
nextjs.org

도움이 되셨나요?
이상 팩트만 진행하겠습니다. 개발을 위한 세팅 및 샘플작성은 다음글에서~
수고 하셨습니다.

이상 arenacast 개발팀
Kurt