chore: sync content to repo (#10328)

Co-authored-by: nilbuild <4921183+nilbuild@users.noreply.github.com>
2026-09-19 09:32:03 +08:00 · 2026-09-14 14:48:47 +02:00
parent 0505268b44
commit 0dc34050e1
30 changed files with 60 additions and 72 deletions
@@ -1,9 +1,9 @@
-# API Endpoints 
+# API Endpoints

 API Routes let you create an API endpoint inside a Next.js app. API endpoints work differently in Pages routers and App Routers:

-* Pages Router: Historically, Next.js used pages/api/* for APIs. This approach relied on Node.js request/response objects and an Express-like API.
-* App Router (Default): Introduced in Next.js 13, the App Router fully embraces web standard Request/Response APIs. Instead of pages/api/*, you can now place `route.ts` or `route.js` files anywhere inside the app/ directory.
+*   Pages Router: Historically, Next.js used pages/api/\* for APIs. This approach relied on Node.js request/response objects and an Express-like API.
+*   App Router (Default): Introduced in Next.js 13, the App Router fully embraces web standard Request/Response APIs. Instead of pages/api/\*, you can now place `route.ts` or `route.js` files anywhere inside the app/ directory.

 Visit the following resources to learn more:

@@ -1,6 +1,6 @@
 # Caching API Endpoints in Next.js

-When you don't know the exact route segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time. One example is catch-all segments, which allow you to extend API Routes  to catch all subsequent paths.
+When you don't know the exact route segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time. One example is catch-all segments, which allow you to extend API Routes to catch all subsequent paths.

 Visit the following resources to learn more:

@@ -1,8 +1,8 @@
 # Client-Side Data Fetching

-Client-side data fetching involves retrieving data directly in the user's browser using JavaScript. This happens after the initial HTML content is loaded. When a user interacts with a page, or after a certain event, the browser makes a request to an API or data source. The fetched data is then used to update the user interface dynamically, without requiring a full page reload. 
+Client-side data fetching involves retrieving data directly in the user's browser using JavaScript. This happens after the initial HTML content is loaded. When a user interacts with a page, or after a certain event, the browser makes a request to an API or data source. The fetched data is then used to update the user interface dynamically, without requiring a full page reload.

-Client-side data fetching is useful when your page doesn't require SEO indexing, when you don't need to pre-render your data, or when the content of your pages needs to update frequently.  It's important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages. This is because the data fetching is done at the time of the component or pages mount, and the data is not cached.
+Client-side data fetching is useful when your page doesn't require SEO indexing, when you don't need to pre-render your data, or when the content of your pages needs to update frequently. It's important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages. This is because the data fetching is done at the time of the component or pages mount, and the data is not cached.

 Visit the following resources to learn more:

@@ -1,11 +1,12 @@
 # Data Fetching Patterns in Next.js

-There are a few recommended patterns and best practices for fetching data in React and Next.js, including: 
-* Fetching data on the server.
-* Fetching data only where it's necessary.
-* Using React's streaming and Suspense features to progressively render and incrementally stream rendered units of the UI to the client.
-* Using parallel or sequential fetching depending on your particular use case.
-* Using preload data.
+There are a few recommended patterns and best practices for fetching data in React and Next.js, including:
+
+*   Fetching data on the server.
+*   Fetching data only where it's necessary.
+*   Using React's streaming and Suspense features to progressively render and incrementally stream rendered units of the UI to the client.
+*   Using parallel or sequential fetching depending on your particular use case.
+*   Using preload data.

 Visit the following resources to learn more:

@@ -2,10 +2,10 @@

 Next.js can be deployed in multiple ways, including as a :

-* Node.js server, 
-* Docker container, 
-* static export,
-* adapted to run on different platforms.
+*   Node.js server,
+*   Docker container,
+*   static export,
+*   adapted to run on different platforms.

 Visit the following resources to learn more:

@@ -2,7 +2,7 @@

 Environment variables are dynamic values that can affect the behavior of programs on a computer. They are typically used to store configuration settings, API keys, and other sensitive information that should not be hardcoded directly into the application's source code. This allows you to easily change the application's behavior without modifying the code itself, making it more flexible and secure across different environments like development, testing, and production.

-Next.js comes with built-in support for environment variables, which allows you to use `.env` to load environment variables, and bundle environment variables for the browser by prefixing with` NEXT_PUBLIC_`
+Next.js comes with built-in support for environment variables, which allows you to use `.env` to load environment variables, and bundle environment variables for the browser by prefixing with `NEXT_PUBLIC_`

 Visit the following resources to learn more:

@@ -2,8 +2,6 @@

 Data fetching in Next.js allows you to render your content in different ways, depending on your application's use case. By default, layouts and pages are Server Components, which lets you fetch data and render parts of your UI on the server, optionally cache the result, and stream it to the client. When you need interactivity or browser APIs, you can use Client Components to layer in functionality.

-
-
 These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration.

 Visit the following resources to learn more:
@@ -1,11 +1,11 @@
 # Images

- images account for a huge portion of the typical website’s page weight and can have a sizable impact on your website's LCP performance. The Next.js Image component extends the HTML <img> element with features for automatic image optimization, including:
+images account for a huge portion of the typical website’s page weight and can have a sizable impact on your website's LCP performance. The Next.js Image component extends the HTML  element with features for automatic image optimization, including:

-* Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.
-* Visual Stability: Prevent layout shift automatically when images are loading.
-* Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
-* Asset Flexibility: On-demand image resizing, even for images stored on remote servers
+*   Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.
+*   Visual Stability: Prevent layout shift automatically when images are loading.
+*   Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
+*   Asset Flexibility: On-demand image resizing, even for images stored on remote servers

 Visit the following resources to learn more:

@@ -6,5 +6,4 @@ Visit the following resources to learn more:

 - [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
 - [@article@The Modern JavaScript Tutorial](https://javascript.info/)
- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c)
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)
+- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c)
@@ -1,6 +1,6 @@
 # Layouts and Templates

-Layouts and templates provide a way to share UI elements across multiple pages, maintaining state and avoiding unnecessary re-renders. Layouts wrap around pages, persisting across route changes to preserve things like navigation bars or sidebars. 
+Layouts and templates provide a way to share UI elements across multiple pages, maintaining state and avoiding unnecessary re-renders. Layouts wrap around pages, persisting across route changes to preserve things like navigation bars or sidebars.

 Templates are similar to layouts in that they wrap each child layout or page. Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation. This means that when a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, state is not preserved, and effects are re-synchronized.

@@ -8,7 +8,5 @@ Visit the following resources to learn more:

 - [@official@Layouts for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts)
 - [@official@Layouts for Pages Router](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts)
- [@official@Templates for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/template)
 - [@article@A guide to Next.js layouts and nested layouts](https://blog.logrocket.com/guide-next-js-layouts-nested-layouts/)
- [@video@Next.js 15 Tutorial - Layouts](https://www.youtube.com/watch?v=NK-8a8EzWrU)
- [@video@Next.js 15 Tutorial - Templates](https://www.youtube.com/watch?v=yfww2kplO-k)
+- [@video@Next.js 15 Tutorial - Layouts](https://www.youtube.com/watch?v=NK-8a8EzWrU)
@@ -1,8 +1,6 @@
 # Memoization in Fetch

-Memoization is an optimization technique that speeds up subsequent function calls by caching the results of previous calls with the same input parameters. This approach allows for re-use of data in a React Component tree, prevents redundant network calls and enhances performance
-For the initial request, data is fetched from an external source and the result is stored in memory
-Subsequent requests for the same data within the same render pass retrieve the result from memory, bypassing the need to make the request again.
+Memoization is an optimization technique that speeds up subsequent function calls by caching the results of previous calls with the same input parameters. This approach allows for re-use of data in a React Component tree, prevents redundant network calls and enhances performance For the initial request, data is fetched from an external source and the result is stored in memory Subsequent requests for the same data within the same render pass retrieve the result from memory, bypassing the need to make the request again.

 Visit the following resources to learn more:

@@ -2,9 +2,9 @@

 The Metadata APIs can be used to define your application metadata for improved SEO and web shareability and include:

-* The static `metadata` object
-* The dynamic `generateMetadata` function
-* Special file conventions that can be used to add static or dynamically generated favicons and OG images.
+*   The static `metadata` object
+*   The dynamic `generateMetadata` function
+*   Special file conventions that can be used to add static or dynamically generated favicons and OG images.

 Visit the following resources to learn more:

@@ -1,9 +1,10 @@
-# Middleware
-
-Middleware is a powerful feature that allows you to intercept and run code on the server before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly. Middleware executes before routes are rendered. It's particularly useful for implementing custom server-side logic like authentication, logging, or handling redirects.
+# Proxy
+ 
+Proxy is a function that runs before a request completes, letting you inspect and modify the request or response. It replaces Middleware, which served the same purpose in earlier versions of Next.js. It runs on Vercel's Edge Runtime, so you can rewrite URLs, redirect requests, set headers, or check authentication before a page or API route renders. Common uses include protecting routes based on login state, A/B testing, and localization based on request headers.

 Visit the following resources to learn more:

- [@official@Middleware for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/middleware)
- [@official@Middleware for Pages Router](https://nextjs.org/docs/pages/api-reference/file-conventions/middleware)
- [@video@Next.js 15 Tutorial - Middleware](https://www.youtube.com/watch?v=t1KTTZbqCm0)
+- [@official@Proxy for App Router](https://nextjs.org/docs/app/getting-started/proxy)
+- [@official@Proxy for Pages Router](https://nextjs.org/docs/pages/api-reference/file-conventions/proxy)
+- [@article@Why Next.js Renamed Middleware to Proxy (And Why It Matters)](https://medium.com/skillstuff/why-next-js-renamed-middleware-to-proxy-and-why-it-matters-2d6697ca3fe1)
+- [@video@Next.js 16 Middleware DEPRECATED - Authentication In Proxy Or Data Access Layer?](https://www.youtube.com/watch?v=zNgCFXZLoRk)
@@ -1,6 +1,6 @@
 # OpenTelemetry

-Observability is crucial for understanding and optimizing the behavior and performance of your Next.js app. With observability, developers can proactively address issues before they become major problems and provide a better user experience. 
+Observability is crucial for understanding and optimizing the behavior and performance of your Next.js app. With observability, developers can proactively address issues before they become major problems and provide a better user experience.

 Next.js recommends using OpenTelemetry for instrumenting your apps. It's a platform-agnostic way to instrument apps that allows you to change your observability provider without changing your code. Next.js supports OpenTelemetry instrumentation out of the box, which means that we already instrumented Next.js itself.

@@ -2,4 +2,4 @@

 When fetching data inside React components, you need to understand parallel and sequential data fetching. Parallel fetching starts independent requests at the same time, while sequential fetching runs requests one after another when later requests depend on earlier results. Choosing the appropriate pattern can reduce unnecessary waiting and improve application performance.

-@official@Parallel and sequential data fetching
+@official@Parallel and sequential data fetching
@@ -1,4 +1,4 @@
-# Playwright 
+# Playwright

 Next.js supports Playwright for End-to-End (E2E) testing. Playwright is a testing framework that lets you automate Chromium, Firefox, and WebKit with a single API. You can use it to write E2E testing.

@@ -4,4 +4,4 @@ Another way to optimize data fetching is to use the preload pattern. You can opt

 Visit the following resources to learn more:

- [@official@Preloading data](https://nextjs.org/docs/14/app/building-your-application/data-fetching/patterns#preloading-data)
+- [@official@Preloading data](https://nextjs.org/docs/14/app/building-your-application/data-fetching/patterns#preloading-data)
@@ -1,6 +1,6 @@
 # Prettier

-Prettier is an opinionated code formatter that supports many languages, including JavaScript, TypeScript, and CSS. It automatically formats your code to adhere to a consistent style, ensuring readability and maintainability across your project. 
+Prettier is an opinionated code formatter that supports many languages, including JavaScript, TypeScript, and CSS. It automatically formats your code to adhere to a consistent style, ensuring readability and maintainability across your project.

 The ESLint Plugin contains code formatting rules, which may conflict with your existing Prettier setup. To make ESLint and Prettier work together, you can include `eslint-config-prettier` in your ESLint config.

@@ -4,5 +4,5 @@ A route matcher in Next.js middleware allows you to conditionally execute middle

 Visit the following resources to learn more:

- [@official@Matcher for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/middleware#matcher)
+- [@official@Matcher for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/proxy#matcher)
 - [@official@Matcher for Pages Router](https://nextjs.org/docs/pages/api-reference/file-conventions/middleware#matcher)
@@ -2,8 +2,8 @@

 The App Router provides a set of conventions to help you implement more advanced routing patterns. These include:

-* Parallel Routes: Allow you to simultaneously show two or more pages in the same view that can be navigated independently.
-* Intercepting Routes: Allow you to intercept a route and show it in the context of another route. 
+*   Parallel Routes: Allow you to simultaneously show two or more pages in the same view that can be navigated independently.
+*   Intercepting Routes: Allow you to intercept a route and show it in the context of another route.

 These patterns allow you to build richer and more complex UIs, democratizing features that were historically complex for small teams and individual developers to implement.

@@ -3,17 +3,17 @@
 In Next.js, routing is primarily handled through the `app` directory (introduced in Next.js 13) and the older `pages` directory. Key terms include:

 *   **Route:** A specific URL path that maps to a particular component or page. For example, `/blog/my-first-post`.
-
+    
 *   **Route Segment:** A part of the URL path. In `/blog/my-first-post`, `blog` and `my-first-post` are route segments.
-
+    
 *   **File-System Routing:** Next.js uses a file-system based router. The structure of your directories and files within the `app` or `pages` directory directly defines your application's routes.
-
+    
 *   **Dynamic Routes:** Routes that include parameters, allowing you to create pages based on data. For example, `/blog/[slug]` where `[slug]` is a dynamic parameter.
-
+    
 *   **Index Route:** The route that is served when a user visits a directory. Typically represented by an `index.js` or `page.js` file within a directory.
-
+    
 *   **Layout:** A component that wraps multiple pages, providing a consistent UI structure (like headers and footers) across different routes.
-
+    
 *   **Link Component:** The `<Link>` component from `next/link` is used for client-side navigation between routes, providing better performance than traditional `<a>` tags.

 Visit the following resources to learn more:
@@ -2,8 +2,8 @@

 In the context of Next.js, runtime refers to the set of libraries, APIs, and general functionality available to your code during execution. On the server, there are two runtimes where parts of your application code can be rendered:

-* The Node.js Runtime (default), which has access to all Node.js APIs and is used for rendering your application.
-* The Edge Runtime which contains a more limited set of APIs, used in Middleware.
+*   The Node.js Runtime (default), which has access to all Node.js APIs and is used for rendering your application.
+*   The Edge Runtime which contains a more limited set of APIs, used in Middleware.

 Visit the following resources to learn more:

@@ -2,9 +2,6 @@

 Third-party scripts are code snippets from external sources that add functionality to your website, such as analytics, advertising, or social media widgets. Next.js allows you to load a third-party script for multiple routes through the `next/script` component, optimizing performance and enhancing control over when and how scripts are executed within your application.

-
-
-
 These scripts can impact your website's performance because they often require downloading and executing code from external servers. Managing these scripts effectively is crucial for maintaining a fast and responsive user experience.

 Visit the following resources to learn more:
@@ -4,5 +4,5 @@ Server Functions are asynchronous functions that are executed on the server. The

 Visit the following resources to learn more:

- [@official@What are Server Functions?](https://nextjs.org/docs/app/getting-started/updating-data)
+- [@official@ServerActions](https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions)
 - [@video@Next.js Server Actions](https://www.youtube.com/watch?v=gQ2bVQPFS4U)
@@ -5,4 +5,4 @@ Middleware in Next.js allows you to run code before a request is completed. Sett
 Visit the following resources to learn more:

 - [@official@Setting Headers for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/middleware#setting-headers)
- [@official@Setting Headers for Pages Router](https://nextjs.org/docs/pages/api-reference/file-conventions/middleware#setting-headers)
+- [@official@Setting Headers for Pages Router](https://nextjs.org/docs/pages/api-reference/config/next-config-js/headers)
@@ -1,6 +1,6 @@
 # Third Party Libraries

-`@next/third-parties` is a library that provides a collection of components and utilities that improve the performance and developer experience of loading popular third-party libraries, like Google Tag Manager and Google Analytics,  in your Next.js application. All third-party integrations provided by `@next/third-parties` have been optimized for performance and ease of use.
+`@next/third-parties` is a library that provides a collection of components and utilities that improve the performance and developer experience of loading popular third-party libraries, like Google Tag Manager and Google Analytics, in your Next.js application. All third-party integrations provided by `@next/third-parties` have been optimized for performance and ease of use.

 Visit the following resources to learn more:

@@ -4,5 +4,4 @@ Middleware in Next.js allows you to run code before a request is completed. This

 Visit the following resources to learn more:

- [@official@Middleware for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/middleware)
- [@official@Middleware for Pages Router](https://nextjs.org/docs/pages/api-reference/file-conventions/middleware)
+- [@official@Middleware for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/middleware)
@@ -4,5 +4,4 @@ Cookies are small pieces of data that websites store on a user's computer to rem

 Visit the following resources to learn more:

- [@official@Using Cookies for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/middleware#using-cookies)
- [@official@Using Cookies for Pages Router](https://nextjs.org/docs/pages/api-reference/file-conventions/middleware#using-cookies)
+- [@official@Using Cookies for App Router](https://nextjs.org/docs/app/api-reference/file-conventions/middleware#using-cookies)
@@ -6,5 +6,4 @@ Visit the following resources to learn more:

 - [@article@Web3 Frontend – Everything You Need to Learn About Building Dapp Frontends](https://moralis.io/web3-frontend-everything-you-need-to-learn-about-building-dapp-frontends/)
 - [@video@What is the difference between a framework and a library?](https://www.youtube.com/watch?v=D_MO9vIRBcA)
- [@video@Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)
- [@feed@Explore top posts about Frontend Development](https://app.daily.dev/tags/frontend?ref=roadmapsh)
+- [@video@Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)
@@ -6,5 +6,4 @@ Visit the following resources to learn more:

 - [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
 - [@official@React Website](https://react.dev)
- [@video@Full Stack React Developer Course](https://www.youtube.com/watch?v=Bvwq_S0n2pk)
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
+- [@video@Full Stack React Developer Course](https://www.youtube.com/watch?v=Bvwq_S0n2pk)