Next.js14 공부 겸 영어공부로 공식문서 번역하기
중요하다고 생각되는 부분만 요약 번역하여 실제 공식문서와 다를 수 있습니다.
Getting Started
Next.js 란 무엇인가요?
Next.js 는 풀스텍 웹 어플리케이션을 만들 수 있는 리액트 기반 프레임워크 입니다. 유저 인터페이스를 만드는데에 리액트 컴포넌트를 사용하고, 추가적인 기능들과 최적화를 위해 Next.js 를 사용합니다.
내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성합니다. 이것은 당신으로 하여금 환경구성에 시간을 쏟는 대신 당신의 어플리케이션을 만드는데에만 집중할 수 있도록 합니다.
당신이 개인 개발자든, 팀에 소속되어있는 개발자든, Next.js 는 당신이 상호작용하고, 동적이고, 빠른 리액트 어플리케이션을 만들도록 도울 수 있습니다.
Main Features
Routing
파일시스템에 기반하는, 서버컴포넌트들로 이루어진 라우팅으로, layouts, nested routing, loading states, error handling 등을 지원합니다.
Rendering
클라이언트컴포넌트와 서버컴포넌트를 통해 CSR 과 SSR 을 지원합니다.
Next.js 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었습니다.
Edge 및 Node.js 런타임에서 Streaming 기능도 지원합니다.
Data Fetching
서버컴포넌트에서 async/await data fetching 이 간단화되었습니다. 그리고 확장된 fetch API 를 통해 요청 메모이제이션, 데이터 캐싱 그리고 재검증을 지원합니다.
Styling
여러가지 스타일링 방법들을 지원합니다. CSS 모듈, Tailwind CSS, CSS-in-JS
Optimizations
웹 성능과 유저경험 향상을 위해 이미지, 폰트, 스크립트 최적화를 지원합니다.
TypeScript
향상된 타입스크립트 지원을 통해 향상된 타입체킹 그리고 효율적인 컴파일이 가능합니다.
이 문서(공식문서)를 사용하는 방법
왼쪽에 문서 네비게이션바가 보이는데요. 문서들이 basic 부터 advanced 까지 순서대로 정리되어있습니다. 따라서 당신의 어플리케이션을 만들기 위해서 하나씩 순서대로 읽는 것이 좋습니다. 하지만 당신의 사용방법에 따라 얼마든지 순서를 바꿔읽거나 스킵할 수 있습니다.
페이지 내의 섹션을 빠르게 이동하고 싶다면 오르쪽에 섹션 테이블을 사용하면 됩니다. 페이지를 빠르게 찾고싶다면 가장 위 검색창을 사용하거나 단축어 Ctrl+K or Cmd+K 를 사용하여 검색할 수 있습니다.
시작하고 싶다면 Installation 가이드를 참고하세요.
App Router vs Pages Router
Next.js 는 두 개의 서로 다른 Router를 지원합니다. App Router 와 Pages Router 입니다. App Router 는 최신 라우터로서 서버 컴포넌트나 Streaming 같은 리액트의 최신기능을 지원합니다. Page Router 는 Next.js 이전 버전에서 사용하던 라우터로 서버렌더링되는 리액트 애플리케이션을 지원하여 이전 버전의 Next.js 로 만들어진 어플리케이션들을 지원합니다.
왼쪽 사이드바의 최상단에 (App Router <-> Page Router)로 서로 바꿀 수 있는 드롭다운 메뉴가 보일 것 입니다. 기능들이 서로 다르므로 하나의 메뉴를 선택하여 쭉 문서를 읽는 것이 중요합니다.
페이지 상단의 breadcrumbs 는 당신이 App Router docs 와 Pages Router docs 중 어디를보고 있는지 알려줍니다.
breadcrumbs 예시:
Pre-Requisite Knowledge (선수지식)
처음 시작하는 사람도 문서를 읽기 쉽도록 만들었지만 Next.js를 배우는데만 집중할 수 있도록 어느정도 기본지식은 필요합니다. HTML, CSS, and React 에 대한 기본지식은 갖추고 있기를 권장합니다.
리액트를 좀더 배워야한다면 https://nextjs.org/learn/react-foundations 를 참고하세요.
Installation
https://nextjs.org/docs/getting-started/installation
- Node.js 18.17 이상이 필요합니다
- mac OS, Windows, Linux 를 지원합니다
Automatic Installation (자동 설치)
create-next-app 을 사용하여 Next.js 앱을 자동으로 설치할 것을 권장합니다.
npx create-next-app@latest다음과 같은 프롬프트들을 보게 될 것 입니다.
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*이후 당신이 지정한 project name 과 설정들을 통해 프로젝트 폴더가 만들어질 것 입니다.
Good to know:
- 어플리케이션 코드를 설정 파일과 분리하기 위해
src폴더를 프로젝트 폴더 최상단에 만들 수 있습니다.
Manual Installation (수동 설치)
스킵
Run the Development Server
- 로컬 개발 서버를 실행하기 위해
npm run dev명령어를 콘솔에 입력하세요. (프로젝트 폴더 내부에서) - 브라우저에서
http://localhost:3000에 접속하여 당신의 어플리케이션을 확인하세요. - app/page.tsx (or pages/index.tsx) 파일을 수정하고 저장하여 브라우저에 반영되는 것을 확인하세요.
Next.js Project Structure
https://nextjs.org/docs/getting-started/project-structure
Next.js 프로젝트의 폴더 구조 및 파일을 전반적으로 보는 페이지입니다. 최상단 파일, 폴더들과 설정파일, 그리고 라우팅 컨벤션을 확인 할 수 있습니다.
~ 해당부분은 추후 번역합니다 ~
