DOCSEARCHbyAlgolia
Submit Docs

Next.js 中文文档

website·Indexed 31 days ago

https://note.bingkele.cc

中文翻译版本的 Next.js 官方文档，涵盖 App Router 和 Pages Router 的 API 参考。包含文件约定（File Conventions）、配置选项（next.config.js）、以及核心函数如 fetch、permanentRedirect、generateImageMetadata 和 connection() 的详细用法，支持 v13、v14 及 v15 版本特性。

Tokens
392.6K
Snippets
1.9K
Records
2.6K
Agent score
52%

What's inside Next.js

  1. Overview of Next.js Preview Mode

    Preview Mode allows Next.js to bypass Static Generation for specific requests, rendering pages at request time instead of build time. This is primarily used when working with headless CMSs to preview draft content before it is published. Note: This feature is superseded by Draft Mode in newer versions of Next.js.

  2. Overview of the Next.js App Router

    The App Router is a file-system based router for Next.js. It is built to leverage the latest React features, including Server Components, Suspense, and Server Functions, to optimize performance and developer experience.

  3. Overview of common design patterns and their purposes

    Commonly used design patterns to improve code flexibility, maintainability, and decoupling:

    • Singleton: Ensures a single instance with a global access point.
    • Factory: Creates objects via a factory method instead of new to hide implementation details.
    • Observer: Defines a one-to-many dependency where dependents are notified of state changes.
    • Decorator: Dynamically adds behavior to an object by wrapping it in a decorator object.
    • Strategy: Encapsulates a family of algorithms and makes them interchangeable.
    • Adapter: Converts one interface into another that a client expects.

  4. Overview of html2canvas functionality and limitations

    html2canvas is a client-side HTML renderer that creates a "screenshot" of a page or a specific DOM element by reading the DOM and applied styles and rendering them onto a canvas image.

    Key characteristics and limitations:

    • Not a real screenshot: It reconstructs the page based on available DOM information; therefore, the output may not be 100% identical to the actual screen.
    • Client-side only: It does not require server-side rendering and is not compatible with Node.js.
    • CORS Restrictions: It cannot bypass browser content policy restrictions. Rendering cross-origin content requires a proxy to serve content from the same origin.
    • CSS Support: Because CSS properties must be manually implemented for support, many CSS properties are currently unsupported.
    • Stability: The library is considered experimental and may undergo significant changes.

  5. Overview of the Next.js Compiler (SWC)

    The Next.js compiler uses SWC (written in Rust) to transform and minify JavaScript code for production, replacing Babel and Terser. It is enabled by default since Next.js 12 and offers significantly faster compilation speeds (up to 17x faster than Babel). If a project contains an existing Babel configuration or uses unsupported features, Next.js will automatically fall back to Babel.

  6. Overview of testing types for Next.js and React applications

    When testing Next.js and React applications, different testing strategies are used depending on the goal:

    • Unit Testing: Tests isolated blocks of code, such as individual functions, hooks, or components.
    • Component Testing: A specialized form of unit testing focused on React components, verifying rendering, prop interactions, and responses to user events.
    • Integration Testing: Verifies how multiple units (components, hooks, and functions) work together as a group.
    • End-to-End (E2E) Testing: Tests complete user flows in a simulated real-world environment (e.g., a browser) to ensure specific tasks, like a registration process, work in a production-like setting.
    • Snapshot Testing: Captures the rendered output of a component and saves it to a file. Future test runs compare the current output against the snapshot to detect unexpected UI changes.

  7. Overview of Partial Prerendering (PPR) in Next.js

    Partial Prerendering (PPR) is a rendering strategy that allows a single route to contain both static and dynamic content. When a user visits a route, the server sends a static 'shell' immediately for fast initial loading. Dynamic content is placed in 'holes' (defined by React Suspense boundaries) and is streamed in parallel from the server in a single HTTP response, reducing network overhead and avoiding client-server waterfalls.

  8. Overview of Webpack's core capabilities

    Webpack is a static module bundler for modern JavaScript applications. It processes applications by building an internal dependency graph that maps every module required by the project (not limited to JS files) to generate one or more bundles. Its primary capabilities include:

    • Code Compilation: Improves development efficiency and solves browser compatibility issues.
    • Module Integration: Enhances performance and maintainability by reducing the number of frequent browser requests.
    • Universal Module Support: Allows all resource types (HTML, CSS, etc.) to be treated as modules, enabling loading to be controlled via code.

  9. Overview of JavaScript Primitive Data Types

    In the ES2020 standard, JavaScript defines 7 primitive (original) data types. Primitive types store only raw values, have no properties or methods of their own, and are stored in stack memory. They are accessed 'by value', meaning copying a primitive creates a second independent copy of the value.
    // The 7 primitive types:
// undefined
// null
// boolean
// string
// number
// symbol (ES6)
// bigint (ES2020)

  10. Overview of Next.js ESLint integration

    Next.js provides a built-in ESLint plugin called eslint-plugin-next to catch common problems and errors in Next.js applications. The recommended configuration eslint-config-next bundles the following plugins: eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-next.

  11. Overview of next/font optimization

    next/font automatically optimizes fonts (including custom fonts) and removes external network requests to improve privacy and performance. It provides built-in automatic self-hosting, allowing web fonts to be loaded with zero Cumulative Layout Shift (CLS). When using Google Fonts, CSS and font files are downloaded at build time and self-hosted as static assets, meaning the browser never sends requests to Google.

  12. Overview of HTTP/3 and QUIC

    HTTP/3 is the application layer protocol running over QUIC (Quick UDP Internet Connections), a transport layer protocol developed by Google. QUIC replaces TCP with UDP to improve transmission efficiency while adding reliability and security features. A key advantage of HTTP/3 is the reduction of connection establishment latency: it can achieve 1-RTT (Round Trip Time) for initial connections and 0-RTT for cached connections using Diffie-Hellman (DH) key exchange, compared to the multiple RTTs required by TCP + TLS in HTTP/2.