1. Node.js 설치
Next.js를 사용하려면 Node.js가 필요합니다. Node.js가 설치되어 있지 않다면, Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하여 설치하세요. Node 버전은 18.17 or 그 이상이어야 합니다.
2. Create Next App으로 프로젝트 생성
Next.js는 공식적으로 제공하는 프로젝트 생성 도구인 create-next-app을 사용하여 쉽게 새로운 프로젝트를 시작할 수 있습니다. 터미널이나 명령 프롬프트에서 다음 명령어를 실행합니다.
npx create-next-app@latest
✔ TypeScript 사용
- TypeScript는 강력한 형식 시스템을 제공하여 코드 품질과 안정성을 높입니다.
✔ ESLint
- ESLint는 코드 품질과 일관성을 유지하는 도구로, 프로젝트 규칙을 세밀하게 조정할 수 있습니다.
- 유지보수와 팀 작업을 위해 필수적인 도구입니다.
✔ Tailwind CSS
- Tailwind CSS는 React에서 자주 사용되는 Emotion과 Style-Components와 같은 CSS 프레임워크입니다.
- Next.js에 최적화되어 있으며, 반응형 디자인을 쉽게 구현할 수 있습니다.
✔ src 디렉토리 사용
- src/ 디렉토리를 사용하면 프로젝트 구조가 명확해지고, 코드베이스의 관리와 확장성이 향상됩니다.
✔ App Router
- Next.js 13부터 도입된 App Router는 애플리케이션의 라우팅을 개선하고, 서버 컴포넌트와 클라이언트 컴포넌트를 함께 사용할 수 있는 기능을 제공합니다.
- 폴더 기반의 라우팅이 가능해집니다.
✔ Import Alias
- Next.js에서 import alias를 사용하면 긴 상대 경로 대신 별칭을 사용하여 모듈을 더 간편하게 import 할 수 있습니다.
// 기존 방식:
import MyComponent from '../../components/MyComponent';
import { someUtilFunction } from '../../utils/someUtilFunction';
import 'styles/global.css';// import alias를 사용한 방식:
import MyComponent from '@/components/MyComponent';
import { someUtilFunction } from '@/utils/someUtilFunction';
import '@/styles/global.css';
성공적으로 프로젝트가 생성된 걸 확인 할 수 있습니다.
3. 프로젝트 디렉토리로 이동
프로젝트 생성이 완료되면, 생성된 프로젝트 디렉터리로 이동합니다:
이렇게 자동으로 폴더가 생성되었습니다.
VScode로 폴더를 열어 확인해보면 이런 식의 디렉터리 구조를 갖는 것을 확인할 수 있습니다.
config관련 내용들은 뒤에서 이어서 정리하도록 하겠습니다.
4. yarn dev 로 프로그램 실행
yarn dev
Terminal에서 프로젝트가 생성된 폴더로 들어가 yarn dev 명령어와 함께 프로젝트를 실행시킵니다.
이렇게 성공적으로 http://localhost:3000으로 접속가능한 것을 확인할 수 있습니다.
반응형
