[Next.js] Next.js 소개 및 설치

by


Next.js에 대한 설명 및 설치 방법에 대하여 정리합니다.

Next.js 란?

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. React 구성 요소를 사용하여 사용자 인터페이스를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행합니다.

내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 낭비하는 대신 애플리케이션 구축에 집중할 수 있습니다.

개인 개발자이든 대규모 팀의 일원이든 Next.js는 대화형의 동적이며 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다.

Next.js 주요 특징

특징설명
라우팅레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터입니다.
표현클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 및 서버 측 렌더링. Next.js를 사용하여 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었습니다. Edge 및 Node.js 런타임에서 스트리밍합니다.
데이터 가져오기서버 구성 요소의 async/await를 사용하여 데이터 가져오기를 단순화하고 fetch요청 메모, 데이터 캐싱 및 재검증을 위한 확장된 API를 제공합니다.
스타일링CSS 모듈, Tailwind CSS, CSS-in-JS 등 선호하는 스타일 지정 방법 지원
최적화애플리케이션의 핵심 웹 바이탈 및 사용자 경험을 개선하기 위한 이미지, 글꼴 및 스크립트 최적화.
타입스크립트더 나은 유형 검사, 더 효율적인 컴파일, 사용자 정의 TypeScript 플러그인 및 유형 검사기를 통해 TypeScript에 대한 지원이 향상되었습니다.

앱 라우터(App Router) vs 페이지 라우터(Pages Router)

Next.js에는 앱 라우터(App Router)와 페이지 라우터(Pages Router)라는 두 가지 라우터가 있습니다. 앱 라우터는 서버 구성 요소 및 스트리밍과 같은 React의 최신 기능을 사용할 수 있는 최신 라우터입니다. Pages Router는 서버에서 렌더링된 React 애플리케이션을 구축할 수 있게 해 주고 이전 Next.js 애플리케이션에 대해 계속 지원되는 최초의 Next.js 라우터입니다.

사이드바 상단에는 앱 라우터 와 페이지 라우터 기능 간에 전환할 수 있는 드롭다운 메뉴가 있습니다. 각 디렉터리마다 고유한 기능이 있으므로 어떤 탭이 선택되었는지 추적하는 것이 중요합니다.

페이지 상단의 이동 경로는 앱 라우터 문서를 보고 있는지 페이지 라우터 문서를 보고 있는지도 나타냅니다.

Next.js 설치

자동 설치

설치 프롬프트를 이용하여 Next.js를 설치하는 방식입니다.

npx create-next-app@latest

Case 1) 프롬프트 모두 ‘No’ 선택

설치 프롬프트에서 선택 사항을 모두 ‘No’로 선택하여 설치하는 경우 입니다.

(venv) F:\jackerlab_project\nextjs_test>npx create-next-app@latest 
Need to install the following packages:
  create-next-app@14.0.4
Ok to proceed? (y) y
√ What is your project named? ... next-web-no
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Creating a new Next.js app in F:\jackerlab_project\nextjs_test\next-web-no.

Using npm.

Initializing project with template: default


Installing dependencies:
- react
- react-dom
- next


added 22 packages, and audited 23 packages in 1m

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created next-web at F:\jackerlab_project\nextjs_test\next-web-no
  • Ok to proceed? (y) y
  • √ What is your project named? … next-web-no
  • √ Would you like to use TypeScript? … No / Yes
  • √ Would you like to use ESLint? … No / Yes
  • √ Would you like to use Tailwind CSS? … No / Yes
  • √ Would you like to use `src/` directory? … No / Yes
  • √ Would you like to use App Router? (recommended) … No / Yes
  • √ Would you like to customize the default import alias (@/*)? … No / Yes

Case 2) 프롬프트 모두 ‘Yes’ 선택

설치 프롬프트에서 선택 사항을 모두 ‘Yes’로 선택하여 설치하는 경우 입니다. 

(venv) F:\jackerlab_project\nextjs_test>npx create-next-app@latest
Need to install the following packages:
  create-next-app@14.0.4
Ok to proceed? (y) y
√ What is your project named? ... next-web-yes
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in F:\jackerlab_project\nextjs_test\next-web-yes.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 332 packages, and audited 333 packages in 3m

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created next-web at F:\jackerlab_project\nextjs_test\next-web-yes
  • Ok to proceed? (y) y
  • √ What is your project named? … next-web-yes
  • √ Would you like to use TypeScript? … No / Yes
  • √ Would you like to use ESLint? … No / Yes
  • √ Would you like to use Tailwind CSS? … No / Yes
  • √ Would you like to use `src/` directory? … No / Yes
  • √ Would you like to use App Router? (recommended) … No / Yes
  • √ Would you like to customize the default import alias (@/*)? … No / Yes
  • √ What import alias would you like configured? … @/*

수동 설치

수동으로 설치하는 경우입니다.

npm install next@latest react@latest react-dom@latest
(venv) F:\jackerlab_project\nextjs_test>mkdir next-web-manual

F:\jackerlab_project\nextjs_test>cd next-web-manual

(venv) F:\jackerlab_project\nextjs_test\next-web-manual>npm install next@latest react@latest react-dom@latest

added 22 packages in 1m

3 packages are looking for funding
  run `npm fund` for details
  • package.json

이 스크립트는 애플리케이션 개발의 다양한 단계를 나타냅니다.

  • dev: next dev 는개발 모드에서 Next.js를 시작하기 위해 실행됩니다.
  • build: next build 는 프로덕션 용도로 애플리케이션을 빌드하기 위해 실행됩니다.
  • start: next start 는 Next.js 프로덕션 서버를 시작하기 위해 실행됩니다.
  • lint: next lint 는 Next.js의 내장 ESLint 구성을 설정하기 위해 실행됩니다.
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

마치며

Next.js는 강력한 기능과 개발 생산성 향상을 제공하여 현대적인 웹 애플리케이션을 빠르게 구축할 수 있는 훌륭한 도구입니다.

참고 자료



Leave a Comment