시작하며
Next.js 12 버전으로 시작하여 작년만 13, 14, 15 의 큰 메이저 업데이트가 진행되면서 app router, instrumentation 등 큰 규모의 구조변경과 기능개선이 있었다. 이 문서에서는 작성일 기준 최신버전인 node 22.11.0, npm 11.0.0, nextjs 15.1.4 버전으로 App Router 방식을 사용하여 진행하였다.
nextjs는
nodejs를 기반으로 한 웹 프레임워크로 쉽고 간단한 설정을 통하여 서버작업과 클라이언트 작업을 모두 진행할 수 있다. 타입스크립트, react 등 인기있는 라이브러리들을 기본적으로 탑재하여 통합 개발환경을 구성하고 쉽게 배포할 수 있어서 많은 사랑을 받고 있다.
설치
npx create-next-app@latest project
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … No
✔ Would you like to customize the import alias (`@/*` by default)? … No
project 폴더에 nextjs 프로젝트가 설치된다. 대부분 기본값으로 설정했지만 Turbopack의 경우 아직 익숙하지 않기도 하고 아직 무르익지 않은 느낌이 있어 No를 선택하였다.
.
├── app
├── node_modules
├── public
├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json
설치가 완료되면 프로젝트는 위와 같은 구조를 갖는다. npm run dev 명령을 통해 설치된 프로젝트를 구동하고 http://locahost:3000으로 접속하여 확인할 수 있다. 각각의 디렉토리 사용법과 추가 기능들에 대해서는 포스트를 하나씩 작성하며 알아보도록 하겠다.