next.js 공식문서 번역

빠른 시작 (Quick start) 가장 빠르게 시작하는 방법입니다. 아래 순서대로 따라 해보세요! my-app이라는 이름의 새로운 Next.js 앱을 만듭니다. cd my-app 명령어로 해당 폴더로 이동한 뒤, 개발 서버를 시작합니다. 브라우저를 열고 http://localhost:3000에 접속합니다. 사용하시는 패키지 매니저에 맞춰 아래 명령어...

프로젝트 구조 및 조직

레이아웃과 페이지

링킹 및 네비게이팅

서버 및 클라이언트 구성 요소

캐시 컴포넌트들

패칭 데이터

데이터 업데이팅

캐싱 및 재검증

오류 처리

CSS

이미지 최적화

폰트 최적화

메타데이터 및 OG 이미지

라우트 핸들러

프록시 ( 구 미들웨어 )

배포

버전 업그레이드

Next.js에서 인증 구현 방법

프론트엔드의 백엔드로 Next.js를 사용하는 방법

Next.js의 캐싱

Next.js에서 데이터 보안을 고려하는 방법

Next.js에서 환경 변수 사용 방법

서버 액션을 사용하여 양식 생성 방법

ISR 구현 방법

국제화 (Internationalization)

지연 로딩(Lazy load)하는 방법

Next.js에서 마크다운(Markdown)과 MDX 사용하기

프리페칭 (Prefetching)

퍼블릭 페이지 만들기 (Building public pages)

Next.js에서 리다이렉트(Redirect) 처리하는 방법

스크립트를 불러오고 최적화하는 방법 (How to load and optimize scripts)

Next.js 애플리케이션을 자체 호스팅하는 방법

Next.js로 단일 페이지 애플리케이션 구축하기

Next.js 애플리케이션의 정적 내보내기(Static Export) 생성 방법

Next.js 애플리케이션에 Tailwind CSS v3 설치하는 방법

Next.js에서 Playwright 설정하는 방법 (How to set up Playwright with Next.js)

Next.js에 Vitest 설정하는 방법 (How to set up Vitest with Next.js)

Turbopack(터보팩)

Next.js에는 애플리케이션에서 선택해서 사용할 수 있는 두 가지 서버 런타임

AI 코딩 에이전트를 우리 Next.js 프로젝트에 똑똑하게 연동하는 방법

CI 환경에서의 빌드 캐싱(Build Caching)

콘텐츠 보안 정책(Content Security Policy, CSP)

CSS-in-JS-

Next.js에서 커스텀 서버 설정 방법

데이터 보안

Next.js에서 디버깅 도구 사용하는 방법

Next.js에서 Draft Mode(초안 모드)로 콘텐츠 미리 보는 방법

Instrumentation(계측) 설정 방법

Next.js 애플리케이션에서 JSON-LD 구현하는 방법

title: 로컬 개발 환경 최적화하는 방법 (How to optimize your local development environment)

코딩 에이전트를 위한 Next.js MCP 서버 활성화하기 (Enabling Next.js MCP Server for Coding Agents)

메모리 사용량 최적화 방법 (How to optimize memory usage)

멀티존(Multi-zones)과 Next.js를 사용하여 마이크로 프론트엔드 구축하는 방법

OpenTelemetry로 계측(Instrumentation) 설정하는 방법

패키지 번들링 최적화(Optimizing package bundling)

Next.js 애플리케이션 프로덕션 최적화 가이드 (How to optimize your Next.js application for production)

서드파티 라이브러리 최적화 방법 (How to optimize third-party libraries)

비디오 사용 및 최적화 방법 (How to use and optimize videos)

Next.js에서 멀티 테넌트(Multi-tenant) 앱을 구축하는 방법

Next.js로 프로그레시브 웹 앱(PWA) 구축하는 방법

Sass 사용 방법 (How to use Sass)

use cache 디렉티브를 사용하면 특정 라우트(route), React 컴포넌트, 또는 일반 함수를 '캐시 가능(cacheable)'하게 지정할 수 있다

use client

use server

Font 모듈

Form Component

Image Component

<Link>는 기존 HTML의 <a> 요소를 확장해서 만든 React 컴포넌트이다.

Script Component

Dynamic Route Segments (동적 라우트 세그먼트)

useSearchParams는 현재 URL의 쿼리 스트링(query string)을 읽을 수 있게 해주는 클라이언트 컴포넌트(Client Component) 훅이다.

루트 레이아웃(Root Layout) 은 app 디렉토리 최상단에 위치하는 가장 꼭대기 레이아웃이다.

page 파일은 특정 라우트(경로)에 고유한 UI를 정의할 수 있게 해주는 아주 중요한 파일이다.

revalidateTag

updateTag

revalidatePath

fetch

redirect