Next.js 소개 및 개발 환경

Next.js 기초 입문 코스의 첫 번째 회차에 오신 것을 환영합니다. 본 회차에서는 Next.js가 무엇인지, 왜 중요한지, 그리고 개발을 시작하기 위해 어떤 환경을 설정해야 하는지에 대해 심도 있게 학습합니다.

📌 이번 회차 학습 목표

• Next.js의 핵심 개념과 장점을 설명할 수 있습니다.
• Next.js 개발을 위한 필수 소프트웨어를 설치할 수 있습니다.
• Node.js와 npm(또는 Yarn)의 역할을 이해하고 사용할 수 있습니다.
• 새로운 Next.js 프로젝트를 성공적으로 생성하고 실행할 수 있습니다.
• Next.js 프로젝트의 기본 파일 구조를 파악할 수 있습니다.

📝 개념 설명

1. Next.js란 무엇인가?

Next.js는 Vercel에서 개발한 React 프레임워크입니다. React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리이지만, 대규모 애플리케이션 개발 시에는 몇 가지 제약 사항이 있습니다. Next.js는 이러한 React의 한계를 보완하고, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 이미지 최적화, 파일 시스템 기반 라우팅 등 다양한 기능을 기본적으로 제공하여 개발자가 더 효율적으로 웹 애플리케이션을 구축할 수 있도록 돕습니다.

2. 왜 Next.js를 사용해야 하는가?

Next.js는 현대 웹 개발에서 다음과 같은 주요 이점을 제공합니다.

• 향상된 성능: SSR 및 SSG를 통해 초기 페이지 로딩 속도를 크게 단축하고 사용자 경험을 개선합니다.
• SEO 최적화: 검색 엔진 크롤러가 미리 렌더링된 HTML 콘텐츠를 더 쉽게 색인할 수 있어 검색 엔진 최적화(SEO)에 유리합니다.
• 개발자 경험: 파일 시스템 기반 라우팅, API 라우트, 코드 분할, 이미지 최적화 등 다양한 내장 기능으로 개발 생산성을 높입니다.
• 풀스택 기능: 백엔드 API를 Next.js 프로젝트 내에서 직접 생성할 수 있어 풀스택 개발이 용이합니다.

3. 개발 환경 설정의 중요성

효율적인 Next.js 개발을 위해서는 올바른 개발 환경 설정이 필수적입니다. 이는 프로젝트의 안정성과 개발 효율성에 직접적인 영향을 미칩니다. Next.js는 Node.js 런타임을 기반으로 동작하므로, Node.js 설치가 가장 먼저 이루어져야 합니다.

💡 예제 & 실습: Next.js 개발 환경 설정 및 프로젝트 생성

단계 1: Node.js 설치

Next.js는 Node.js 환경에서 실행됩니다. Node.js는 JavaScript 런타임으로, 서버 측 JavaScript 실행 및 npm(Node Package Manager)을 제공합니다.

1. Node.js 공식 웹사이트 방문: https://nodejs.org/ko/
2. LTS (Long Term Support) 버전 다운로드 및 설치: 대부분의 사용자에게 권장되는 안정적인 버전입니다. 운영체제에 맞는 설치 파일을 다운로드하여 실행하고, 기본 설정을 따라 설치를 완료합니다.
3. 설치 확인: 터미널(명령 프롬프트 또는 PowerShell)을 열고 다음 명령어를 입력하여 Node.js와 npm이 제대로 설치되었는지 확인합니다.

node -v
npm -v

성공적으로 설치되었다면, 설치된 Node.js 및 npm의 버전 정보가 출력됩니다.

단계 2: Next.js 프로젝트 생성

Node.js 설치가 완료되었다면, 이제 Next.js 프로젝트를 생성할 수 있습니다. Next.js는 create-next-app이라는 CLI(Command Line Interface) 도구를 제공하여 빠르고 쉽게 프로젝트를 초기화할 수 있습니다.

1. 프로젝트를 생성할 디렉토리로 이동: 터미널에서 프로젝트를 생성할 부모 디렉토리로 이동합니다.
2. Next.js 프로젝트 생성 명령어 실행: 다음 명령어를 입력하고 실행합니다. my-next-app은 생성될 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다.

npx create-next-app@latest my-next-app

이 명령어를 실행하면 몇 가지 설정 질문이 나타납니다. 일반적으로 다음과 같이 선택하는 것을 권장합니다.

• Would you like to use TypeScript? No (초급 단계에서는 JavaScript로 시작하는 것이 좋습니다.)
• Would you like to use ESLint? Yes
• Would you like to use Tailwind CSS? No (선택 사항이지만, 초급 단계에서는 기본 CSS로 시작하는 것이 좋습니다.)
• Would you like to use `src/` directory? Yes (프로젝트 구조를 더 깔끔하게 유지할 수 있습니다.)
• Would you like to use App Router (recommended)? Yes (Next.js 13부터 도입된 새로운 라우터입니다.)
• Would you like to customize the default import alias (@/*)? No

단계 3: 프로젝트 실행

프로젝트 생성이 완료되면, 생성된 프로젝트 디렉토리로 이동하여 개발 서버를 시작합니다.

1. 프로젝트 디렉토리로 이동:

cd my-next-app

2. 개발 서버 시작:

npm run dev

이 명령어를 실행하면 Next.js 개발 서버가 시작되고, 일반적으로 http://localhost:3000 주소에서 웹 애플리케이션을 확인할 수 있습니다. 웹 브라우저를 열고 해당 주소로 접속하면 Next.js의 기본 시작 페이지를 볼 수 있습니다.

단계 4: 프로젝트 기본 구조 이해

생성된 Next.js 프로젝트의 주요 파일 및 폴더 구조는 다음과 같습니다.

• my-next-app/
  • node_modules/: 프로젝트에 설치된 모든 의존성 패키지들이 저장되는 곳입니다.
  • public/: 이미지, 폰트 등 정적 파일을 저장하는 곳입니다.
  • src/: 실제 애플리케이션 코드가 위치하는 핵심 디렉토리입니다. (src/app 폴더가 App Router의 페이지들을 포함합니다.)
  • .next/: Next.js가 빌드 시 생성하는 파일들이 저장되는 곳입니다. (수동으로 수정하지 않습니다.)
  • package.json: 프로젝트의 메타데이터, 스크립트, 의존성 목록을 정의합니다.
  • next.config.js: Next.js 설정을 커스터마이징하는 파일입니다.
  • .gitignore: Git 버전 관리에서 제외할 파일 및 폴더를 지정합니다.

⚠️ 자주 틀리는 것 / 주의사항

🔗 다음 회차 예고

이번 회차에서는 Next.js의 기본 개념과 개발 환경 설정 방법을 학습했습니다. 다음 2회차에서는 ‘Next.js 기본 라우팅 및 페이지 생성’이라는 주제로, Next.js의 핵심 기능 중 하나인 파일 시스템 기반 라우팅을 심층적으로 다루고, 실제로 새로운 페이지를 생성하고 탐색하는 방법을 실습할 예정입니다. Next.js 애플리케이션의 구조를 더욱 깊이 이해하고 사용자 경험을 설계하는 데 필수적인 내용이 될 것입니다.