Introduction - App Router

Learn Next.js

Next.js 기초 과정에 오신 것을 환영합니다! 이 무료 대화형 과정에서는 전체 스택 웹 애플리케이션을 구축하여 Next.js의 주요 기능을 배우게 됩니다.

What we’ll be building

이 과정에서는 다음을 갖춘 재무 대시보드를 구축합니다.

  • A public home page.

  • A login page.

  • 인증으로 보호되는 대시보드 페이지입니다.

  • 사용자가 송장을 추가, 편집, 삭제할 수 있는 기능입니다.

대시보드에는 이후 장에서 설정하게 될 데이터베이스도 포함됩니다.

과정이 끝나면 풀 스택 Next.js 애플리케이션 구축을 시작하는 데 필요한 필수 기술을 갖추게 됩니다.

Overview

이 과정에서 배우게 될 기능에 대한 개요는 다음과 같습니다

  • 스타일링: Next.js에서 애플리케이션의 스타일을 지정하는 다양한 방법입니다.

  • 최적화: 이미지, 링크 및 글꼴을 최적화하는 방법.

  • 라우팅: 파일 시스템 라우팅을 사용하여 중첩된 레이아웃과 페이지를 만드는 방법입니다.

  • 데이터 가져오기: Vercel에서 Postgres 데이터베이스를 설정하는 방법과 가져오기 및 스트리밍 모범 사례입니다.

  • 검색 및 페이지 매김: URL 검색 매개변수를 사용하여 검색 및 페이지 매김을 구현하는 방법.

  • 데이터 변경: React Server Actions를 사용하여 데이터를 변경하고 Next.js 캐시를 재검증하는 방법.

  • 오류 처리: 일반 오류와 404 찾을 수 없는 오류를 처리하는 방법입니다.

  • 양식 유효성 검사 및 접근성: 서버 측 양식 유효성 검사를 수행하는 방법과 접근성 향상을 위한 팁입니다.

  • 인증: NextAuth.js 및 미들웨어를 사용하여 애플리케이션에 인증을 추가하는 방법입니다.

  • 메타데이터: 메타데이터를 추가하고 소셜 공유를 위해 애플리케이션을 준비하는 방법입니다.

사전 지식

본 과정은 독자가 React와 JavaScript에 대한 기본적인 이해를 가지고 있다고 가정합니다. React를 처음 접한다면 먼저 React Foundations 과정을 수강하여 구성 요소, props, 상태 및 후크와 같은 React의 기본 사항과 서버 구성 요소 및 Suspense와 같은 최신 기능을 배우는 것이 좋습니다.

시스템 요구사항

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

  • Node.js 18.18.0 이상이 설치필요합니다. 다운로드

  • 운영 체제: macOS, Windows(WSL 포함) 또는 Linux.

또한 GitHub 계정과 Vercel 계정도 필요합니다.

대화에 참여하세요

이 과정에 대해 질문이 있거나 피드백을 제공하고 싶다면 Reddit 또는 GitHub의 커뮤니티에 문의하세요.