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

Configuring

---

TypeScript

New Projects

  - npx create-next-app@latest

Existing Projects

TypeScript Plugin

  - Plugin Features

    - Warning if the invalid values for segment config options are passed

    - Showing available options and in-context documentation

    - Ensuring the use client directive is used correctly

    - Ensuring client hooks (like useState) are only used in Client Components

Minimum TypeScript Version

Statically Typed Links

End-to-End Type Safety

  - No serialization of data between fetching function and page

  - Streamlined data flow between components

Async Server Component TypeScript Error

Passing Data Between Server & Client Components

Path aliases and baseUrl

Type checking next.config.js

Incremental type checking

Ignoring TypeScript Errors

Version Changes

---

ESLint

ESLint Config

ESLint Plugin

  - Custom Settings

Linting Custom Directories and Files

Caching

Disabling Rules

Core Web Vitals

Usage With Other Tools

  - Prettier

  - lint-staged

Migrating Existing Config

  - Recommend Plugin Ruleset

  - Additional Configurations

---

Environments Variables

Loading Environment Variables

  - Referencing Other Variables

    - Automatically expand variables that use $ to reference other variables

Bundling Environment Variables for the Browser

  - dynamic lookups will not be inlined

Default Environment Variables

Environment Variables on Vercel

Test Environment Variables

Environment Variable Load Order

  1. process.env

  2. .env.$(NODE_ENV).local

  3. .env.local (Not checked when NODE_ENV is test)

  4. .env.$(NODE_ENV)

  5. .env

Good to know

---

Absolute Imports and Module Path Aliases

Absolute Imports

Module Aliases

---

MDX

  - A superset of markdown that lets us write JSX directly in our markdown files

@next/mdx

  - It sources data from local files, allowing us to create pages with a .mdx extension
     directly in our /pages or /app directory

Getting Started

Remote MDX

Layouts

Remark and Rehype Plugins

Frontmatter

Custom Elements

Deep Dive: How do you transform markdown into HTML?

Using the Rust-based MDX compiler (Experimental)

---

src Directory

  - If we're using Tailwind CSS, We'll need to add the /src prefix to the tailwind.config.js file
     in the content section

---

Draft Mode

Step 1: Create and access the Route Handler

  - Securely accessing it from your Headless CMS

Step 2: Update page

More Details

  - Clear the Draft Mode cookie

  - Unique per next build