[Next.js] Next 공식 튜토리얼 진행하기

728x90

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.

공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.

오타 또는 오역된 부분이 있다면 댓글 부탁드립니다.

Next.js 배우기

Next.js 앱 라우터 강좌에 오신 것을 환영합니다! 이 무료 인터랙티브 강좌에서는 풀스택 웹 애플리케이션을 만들어가며 Next.js의 주요 기능을 배울 수 있습니다.

Learn Next.js | Next.js

Learn how to build a full-stack web application with the free, Next.js App Router Course.

nextjs.org

우리가 만들 프로젝트

이 강좌에서는 다음과 같은 기능을 포함한 간단한 금융 대시보드를 만들 것입니다:

공개 홈 페이지
로그인 페이지
인증으로 보호되는 대시보드 페이지
사용자에게 송장을 추가, 수정, 삭제할 수 있는 기능 제공

대시보드에 연결되는 데이터베이스 설정은 나중 챕터에서 다룰 것입니다.

이 과정이 끝나면 풀스택 Next.js 애플리케이션을 시작할 수 있는 기본 기술을 갖추게 될 것입니다.

개요

강좌에서 배우게 될 주요 기능은 다음과 같습니다.

스타일링: Next.js에서 애플리케이션을 스타일링하는 다양한 방법
최적화: 이미지, 링크, 폰트를 최적화하는 방법
라우팅: 파일 시스템 라우팅을 이용해 중첩 레이아웃과 페이지를 생성하는 방법
데이터 페칭: Vercel에 데이터베이스를 설정하고, 데이터 페칭 및 스트리밍의 모범 사례
검색 및 페이지네이션: URL 검색 파라미터를 사용해 검색과 페이지네이션을 구현하는 방법
데이터 수정: React Server Actions를 사용해 데이터를 수정하고 Next.js 캐시를 재검증하는 방법
에러 처리: 일반적인 에러와 404 not found 에러를 처리하는 방법
폼 검증 및 접근성: 서버 측 폼 검증 방법과 접근성을 높이는 팁
인증: NextAuth.js와 미들웨어를 사용하여 애플리케이션에 인증 기능 추가
메타데이터: 소셜 공유를 대비하여 애플리케이션에 메타데이터 추가 방법

사전지식

이 강좌는 React와 JavaScript에 대한 기본적인 이해가 있다는 것을 전제로 합니다. React를 처음 접하는 경우 React Foundations 과정을 먼저 수강하여 먼저 컴포넌트, props, 상태, hooks, 그리고 Server Components와 Suspense 같은 최신 기능을 다루는 React 기본 강좌를 공부하는 것을 추천합니다.

시스템 요구사항

강좌를 시작하기 전에 시스템이 다음 요구 사항을 충족하는지 확인하세요.

Node.js 18.18.0 이상 설치 필요.
운영 체제: macOS, Windows(WSL 포함) 또는 Linux
기타 계정: GitHub 계정과 Vercel 계정 필요

커뮤니티에 참여하기

이 강좌에 대해 질문이 있거나 피드백을 주고 싶다면 Discord 또는 GitHub 커뮤니티에서 자유롭게 문의하세요.