[ Next 블로그 개발 ] 1. Next.js로 시작하는 블로그 프로젝트: 설치부터 기본 세팅까지
최신 React 프레임워크, Next.js를 활용한 개발 환경 구축 가이드
서론
React로 개발된 웹사이트에서 SEO와 초기 속도가 중요한 블로그 프로젝트를 시작한다면, Next.js는 최고의 선택지입니다. 이번 글에서는 Next.js로 블로그 개발을 빠르게 시작할 수 있도록, 설치부터 필수 옵션 선택, 그리고 개발 서버 실행까지 단계별로 친절하게 안내합니다.
1. Next.js란 무엇인가요?
Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅, 그리고 최신 번들러 Turbopack 등 다양한 기능을 제공합니다. 덕분에 블로그처럼 검색 노출이 중요한 프로젝트에 매우 적합합니다.
2. Next.js 프로젝트 생성하기
2-1. Node.js 설치 확인
먼저, Node.js가 설치되어 있는지 터미널에서 아래 명령어로 확인합니다.
node -v
npm -v
최소 Node.js 18 이상이 권장됩니다.
2-2. 프로젝트 생성
아래 명령어로 Next.js 프로젝트를 생성합니다.
npx create-next-app@latest my-nextjs-blog
my-nextjs-blog 대신 원하는 폴더명을 입력해도 됩니다.
2-3. 설치 과정에서 나오는 주요 질문
아래와 같은 옵션이 순서대로 나옵니다. 프로젝트 성격에 맞게 선택하세요!
| 질문(영문) | 질문(한글 해설) | 추천 답변(블로그 기준) |
| Would you like to use TypeScript with this project? | 이 프로젝트에 TypeScript를 사용할까요? | Yes |
| Would you like to use ESLint with this project? | 코드 스타일 검사(ESLint)를 사용할까요? | Yes |
| Would you like to use Tailwind CSS with this project? | Tailwind CSS를 사용할까요? | 선택 |
Would you like to use src/ directory with this project? | 소스 코드를 src/ 폴더에 정리할까요? | Yes |
Would you like to use experimental app/ directory with this project? | 최신 App Router(app/ 폴더)를 사용할까요? | Yes |
| What import alias would you like configured? | import 경로 별칭을 어떻게 설정할까요? | 기본값(@/*) 추천 |
3. 개발 서버 실행과 Turbopack
프로젝트 생성이 완료되면 아래 명령어로 개발 서버를 실행하세요.
cd my-nextjs-blog
npm run dev
터미널에 아래와 같이 Turbopack이 적용되었다는 메시지가 보이면 정상입니다.
✔ Local http://localhost:3000
Using @vercel/turbopack
브라우저에서 http://localhost:3000 으로 접속하여 기본 페이지가 뜨는지 확인해봅니다.
4. 폴더 구조와 주요 파일
생성된 프로젝트의 기본 구조는 아래와 같습니다.
my-nextjs-blog/
├── app/ # 최신 App Router 기반 페이지
├── public/ # 정적 파일(이미지 등)
├── src/ # 소스코드(선택)
├── styles/ # CSS, SCSS 등
├── package.json
└── next.config.js
5. 마치며
Next.js는 블로그 개발에 필요한 빠른 렌더링, SEO 최적화, 쉬운 라우팅, 개발 생산성을 모두 제공합니다. 특히 Turbopack을 이용한 개발 환경은 대규모 프로젝트에서도 빠른 속도를 경험할 수 있게 해줍니다.
이제 Next.js로 나만의 블로그 프로젝트를 시작해보세요!