[Next.js] how to start

시작은 간단하게 자동으로 해주는 방식과 수동으로 직접 하는 방법이 있습니다.

 

자동

npx create-next-app@latest

 

수동의 경우 이거저거 설정할 일이 많기 때문에 공식 문서만 훑어보고 자동으로 설정하는 것으로 하겠습니다.

 

궁금증. React를 사용할 때에는 CreateReactApp보다 Vite를 사용하게 되었는데 Next는 왜 CreateNextApp을 사용하는가?

현재 Vite에서는 Next.js에서 필요한 파일시스템 기반 라우팅이나 SSR 런타임 같은 부분까지 공식적으로 제공되지 않습니다. 그렇기 때문에 특화된 기능을 제공하는 CNA를 사용합니다.

 

Create Next App 옵션

명령어를 실행하고 원하는 옵션을 선택해 next가 설치되면 아래와 같은 폴더 및 파일을 가지게 됩니다.

 

폴더

• .next
• node_modules
• public: static assets
• src: app, pages folder

파일

• .gitignore: github에 올리지 않을 파일 설정 파일
• eslint.config.mjs: esline 설정 파일
• next-env.d.ts: 타입 선언 관련 파일
• next.config.ts: next 설정 파일
• package.json, package-lock.json: 디펜던시 관련 파일
• postcss.config.mjs: tailwindcss를 사용하기 위한 설정 파일
• README.md: 기본 리드미 파일
• tailwind.config.ts: 저는 이 파일이 없었습니다. 그렇지만 tailwind 설정 부분이기 때문에 필요하면 만들겠습니다.
• tsconfig.json: TS 설정 파일

 

참고

https://nextjs-ko.org/docs

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY

https://nextjs.org/docs/app/getting-started