Next.js는 React 애플리케이션을 위한 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 프레임워크입니다. Next.js는 Vercel에 의해 개발 및 유지 관리되고 있으며, 다양한 기능과 유연한 아키텍처를 제공하여 복잡한 웹 애플리케이션을 쉽게 개발할 수 있게 해줍니다. Next.js의 주요 특징과 사용법을 알아보겠습니다.
주요 특징
1. 서버 사이드 렌더링(SSR)
Next.js는 서버에서 페이지를 렌더링하여 초기 로드 시간을 단축하고, SEO를 개선할 수 있습니다.
2. 정적 사이트 생성(SSG)
Next.js는 빌드 시 모든 페이지를 정적으로 생성하여 높은 성능과 보안을 제공합니다. 이는 블로그, 마케팅 페이지 등 정적인 콘텐츠에 적합합니다.
3. 클라이언트 사이드 네비게이션
React와 마찬가지로 클라이언트 사이드에서의 빠른 페이지 전환을 지원합니다.
4. API 라우트
서버리스 함수처럼 동작하는 API 라우트를 쉽게 작성할 수 있어, 백엔드 코드와 프론트엔드 코드를 한 프로젝트에서 관리할 수 있습니다.
5. 자동 코드 분할
페이지 단위로 코드 분할을 자동으로 처리하여, 초기 로드 속도를 향상시키고 필요할 때만 코드를 로드합니다.
6. 이미지 최적화
Next.js는 이미지 컴포넌트를 제공하여 자동으로 이미지 최적화, 리사이징, 포맷 변환 등을 처리합니다.
7. TypeScript 지원
TypeScript를 네이티브로 지원하여, 타입 안정성과 개발자 경험을 향상시킵니다.
사용법 (수동설치)
1. 설치
프로젝트 폴더 생성후
npm init -y그렇게 생성된 package.json 파일을 아래와 같이 수정합니다.
{
...
"license": "MIT"
}다시 터미널에서
npm install react@latest next@latest react-dom@latest
package.json 파일을 아래와 같이 수정합니다.
{
...
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
...
}2. 페이지 생성
최상위에 app 폴더 생성후 page.tsx 파일 생성
// app/page.tsx
import React from 'react';
export default function Page() {
return <h1>Hello, Next.js!</h1>
}위 코드는 기본 루트 경로(/)에서 "Welcome to Next.js!"를 표시하는 페이지를 만듭니다.
3. 페이지 실행
npm run dev
출처
Next.js 공식 문서 : https://nextjs.org/docs/getting-started/installation
Next.js는 SSR, SSG, 클라이언트 사이드 네비게이션 등 다양한 기능을 제공하여, 복잡한 웹 애플리케이션을 빠르고 효율적으로 개발할 수 있는 강력한 프레임워크입니다.
