[Next.js 13 공식 문서 App Router] - Getting Started

Getting Started

Introduction

What is Next.js?

- React Meta Framework

Main Features

- Routing: A file-system based router built on top of Server Components

- Rendering: Client/Server-side-rendering, server's static/dynamic rendering, streaming

- Data Fetching: async/await in Server Components,
                             extended fetch API for request memoization/data caching/revalidation

- Styling: CSS Modules, Tailwind CSS, CSS-in-JS

- Optimizations: Image, Fonts, Script

- TypeScript

How to use these Docs

App Router vs. Pages Router

- App Router

  - Server Components

  - Streaming

- Pages Router

Pre-Requisite Knowledge

- HTML, CSS, React

Accessibility

Join our community

---

Installation

- Node.js ^16.14

Automatic Installation

- create-next-app

Manual Installation

- install next@latest, react@latest, react-dom@latest

- package.json scripts

- App Router will be prioritized over Pages Router

Run the Development Server

---

Next.js Project Structure

Top-level folders

- app

- pages

- public: static assets to be served

- src: Optional

Top-level files

- next.config.js

- package.json

- instrumentation.ts: OpenTelemetry and Instrumentation file

- middleware.ts

- .env

- .env.local

- .env.production

- .env.development

- .eslintrc.json

- .gitignore

- .next-env.d.ts: TypeScript declaration file for Next.js

- tsconfg.json

- jsconfig.json

- postcss.config.js: Configuration file for Tailwind CSS

app Routing Conventions

- Routing Files

  - Layout

  - page

  - loading

  - not-found

  - error

  - global-error

  - route: API endpoint

  - template: Re-rendered layout

  - default: Parallel route fallback page

- Nested Routes

  - folder

  - folder/folder

- Dynamic Routes

  - [folder]: Dynamic route segment

  - [...folder]: Catch-all route segment

  - [[...folder]]: Optional catch-all route segment

- Route Groups and Private Folders

  - (folder): Group routes without affecting routing

  - _folder: Opt folder and all child segments out of routing

- Parallel and Intercepted Routes

  - @folder: Named slot

  - (.)folder: Intercept same level

  - (..)folder: Intercept one level above

  - (..)(..)folder: Intercept two levels above

  - (...)folder: Intercept from root

- Metadata File Conventions

  - App Icons

    - favicon

    - icon

    - icon (generated, .js/.ts/.tsx)

    - apple-icon

    - apple-icon (generated .js/.ts/.tsx)

  - Open Graph and Twitter Images

    - opengraph-image

    - opengraph-image (generated)

    - twitter-image

    - twitter-image (generated)

  - SEO

    - sitemap

    - sitemap (generated)

    - robots

    - robots (generated)

Pages Routing Conventions

- Special Files

  - _app

  - _document

  - _error

  - 404

  - 500

- Routes

  - Folder convention

    - index

    - folder/index

  - File convention

    - index

    - file

- Dynamic Routes

  - Folder convention

    - [folder]/index

    - [...folder]/index

    - [[...folder]]/index

  - File convention

    - [file]

    - [...file]

    - [[...file]]