Next.js 풀스택 앱 만들기

Next.js 배우기

Next.js 앱 라우터 과정에 오신 것을 환영합니다! 풀스택 웹 애플리케이션을 구축하면서 Next.js의 주요 기능을 배우게 됩니다.

무엇을 만들게 될까요

데스크톱 및 모바일 버전을 보여주는 대시보드 프로젝트의 스크린샷입니다.

이 과정에서는 다음을 포함하는 금융 대시보드의 간소화된 버전을 만들게 됩니다.

• 공개 홈페이지
• 로그인 페이지
• 인증으로 보호되는 대시보드 페이지들
• 사용자가 인보이스를 추가, 수정, 삭제할 수 있는 기능

대시보드는 나중 장에서 설정할 수반 데이터베이스도 포함할 것입니다.

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

개요

이 과정에서 배울 기능 개요입니다.

• 스타일링: Next.js에서 애플리케이션을 스타일링하는 다양한 방법
• 최적화: 이미지, 링크, 폰트를 최적화하는 방법
• 라우팅: 파일 시스템 라우팅을 사용하여 중첩된 레이아웃과 페이지를 만드는 방법
• 데이터 가져오기: Vercel에서 데이터베이스를 설정하고 가져오기 및 스트리밍을 위한 모범 사례
• 검색 및 페이지네이션: URL 검색 매개변수를 사용하여 검색 및 페이지네이션을 구현하는 방법
• 데이터 변경: 리액트 서버 액션을 사용하여 데이터를 변경하고 Next.js 캐시를 재검증하는 방법
• 에러 처리: 일반 및 404 찾을 수 없는 에러를 처리하는 방법
• 폼 검증 및 접근성: 서버 측 폼 검증을 수행하고 접근성을 향상시키기 위한 팁
• 인증: NextAuth.js와 미들웨어를 사용하여 애플리케이션에 인증 추가
• 메타데이터: 메타데이터를 추가하고 애플리케이션을 소셜 공유에 대비시키는 방법

필수 지식

이 과정은 리액트와 자바스크립트의 기본적인 이해를 가정합니다. 리액트에 익숙하지 않다면 컴포넌트, 프롭스, 상태, 훅과 같은 리액트의 기본 사항과 서버 컴포넌트 및 서스펜스와 같은 새로운 기능을 배우기 위해 먼저 리액트 기초 과정을 거치는 것을 추천합니다.

시스템 요구사항

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

• Node.js 18.17.0 이상 설치됨. 여기에서 다운로드할 수 있습니다.
• 운영 체제: macOS, Windows(WSL 포함), 또는 Linux.

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

주요 내용