### Payload CMS Development Setup Source: https://github.com/payloadcms/payload/tree/main/examples/auth Instructions for setting up the Payload CMS example locally. It mentions following a 'Quick Start' guide, which is a common pattern for project initialization and setup. ```bash # Follow the Quick Start guide to spin up this example locally. ``` -------------------------------- ### Install Dependencies and Start Development Server Source: https://github.com/payloadcms/payload/tree/main/examples/email Installs project dependencies and starts the development server, making the Payload application accessible for testing and administration. ```bash pnpm install && pnpm dev ``` -------------------------------- ### Install Next.js with create-next-app Source: https://nextjs.org/docs/app/building-your-application/deploying This command initializes a new Next.js project. It allows for configuration of TypeScript, styling options, and more. Ensure you have Node.js installed. Dependencies include React and Next.js itself. ```bash npx create-next-app@latest ``` -------------------------------- ### Next.js Documentation Structure: Getting Started Source: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables Represents a section of Next.js documentation focusing on 'Getting Started'. It includes a title, description, path, and nested children for sub-topics like 'Installation' and 'Project Structure'. This structure is likely used to render a navigation or content outline for the documentation. ```json {\"items\":{\"13\":[{\"title\":\"Getting Started\",\"description\":\"Learn how to create full-stack web applications with Next.js.\",\"path\":\"13/getting-started\",\"version\":\"$undefined\",\"source\":\"docs/13/01-getting-started/index.mdx\",\"children\":[{\"title\":\"Installation\",\"description\":\"Create a new Next.js application with \`create-next-app\`. Set up TypeScript, styles, and configure your \`next.config.js\` file.\",\"path\":\"13/getting-started/installation\",\"version\":\"$undefined\",\"source\":\"docs/13/01-getting-started/01-installation.mdx\",\"children\":[]},{\"title\":\"Project Structure\",\"description\":\"A list of folders and files conventions in a Next.js project\",\"path\":\"13/getting-started/project-structure\",\"version\":\"$undefined\",\"source\":\"docs/13/01-getting-started/02-project-structure.mdx\",\"children\":[]}]}]}} ``` -------------------------------- ### Deployment Options for Next.js Projects Source: https://nextjs.org/docs/app/building-your-application/deploying This section lists various deployment options for Next.js applications, including Docker, Docker Multi-Environment, and DigitalOcean. Each option links to a relevant guide or example. ```html Docker ``` ```html Docker Multi-Environment ``` ```html DigitalOcean ``` -------------------------------- ### create-next-app Source: https://nextjs.org/docs/app/building-your-application/routing Command-line interface for creating new Next.js applications with a streamlined setup process. ```APIDOC ## `create-next-app` CLI ### Description The `create-next-app` command provides a convenient way to scaffold new Next.js projects, setting up the necessary configurations and dependencies with minimal effort. ### Method N/A (CLI Command) ### Endpoint N/A (CLI Command) ### Parameters (These are arguments for the `create-next-app` command) - **[template]** (string) - Optional - Specifies the template to use for the new project (e.g., `app`, `blog`). - **`--typescript`** (boolean) - Optional - Enables TypeScript support. - **`--eslint`** (boolean) - Optional - Integrates ESLint for code linting. - **`--tailwind`** (boolean) - Optional - Sets up Tailwind CSS for styling. - **`--src-dir`** (boolean) - Optional - Creates a `src/` directory for the application code. - **`--app`** (boolean) - Optional - Uses the new App Router instead of the Pages Router. - **`--import-alias`** (string) - Optional - Sets up a custom module import alias. ### Request Example ```bash npx create-next-app@latest my-next-app --typescript --eslint --tailwind --app ``` ### Response (N/A - This is a CLI command that creates a project) ### Response Example (N/A - This is a CLI command that creates a project) ``` -------------------------------- ### Build and Start Payload for Production Source: https://github.com/payloadcms/payload/tree/main/templates/website Commands to build the Next.js admin panel and start the Payload Node.js server for production. Ensure you have pnpm or npm installed. This process creates a production-ready bundle in the '.next' directory. ```bash pnpm build pnpm start ``` ```bash npm run build npm run start ``` -------------------------------- ### Build and Start Next.js Node.js Server Source: https://nextjs.org/docs/app/building-your-application/deploying Commands to build the Next.js application for production and start the Node.js server. This server supports all Next.js features. Ejecting to a custom server is also an option for advanced configurations. ```bash npm run build npm run start ``` -------------------------------- ### Create Payload App with Live Preview Example Source: https://github.com/payloadcms/payload/tree/main/examples/live-preview Use this command to generate a new Payload project pre-configured with the Live Preview example. This command requires npx to be installed and accessible in your environment. ```bash npx create-payload-app --example live-preview ``` -------------------------------- ### NextRequest Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for NextRequest. ```APIDOC ## NextRequest ### Description API Reference for NextRequest. ### Method Not applicable (Class) ### Endpoint Not applicable (Class) ### Parameters Extends the standard Request object with additional properties and methods specific to Next.js. ### Request Example ```json { "example": "Example usage of NextRequest in an API route" } ``` ### Response #### Success Response (200) Represents an incoming request to a Next.js application. #### Response Example ```json { "example": "NextRequest object structure" } ``` ``` -------------------------------- ### NextResponse Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for NextResponse. ```APIDOC ## NextResponse ### Description API Reference for NextResponse. ### Method Not applicable (Class) ### Endpoint Not applicable (Class) ### Parameters Extends the standard Response object with additional properties and methods specific to Next.js. ### Request Example ```json { "example": "Example usage of NextResponse in an API route" } ``` ### Response #### Success Response (200) Represents an outgoing response from a Next.js application. #### Response Example ```json { "example": "NextResponse object structure" } ``` ``` -------------------------------- ### Next.js Documentation Structure (JSON) Source: https://nextjs.org/docs/app/building-your-application/deploying This JSON structure represents the organization of documentation content within a Next.js project. It details items like 'Getting Started' and 'Building Your Application', including titles, descriptions, paths, and nested children for navigation and content. ```json { "items": { "13": [ { "title": "Getting Started", "description": "Learn how to create full-stack web applications with Next.js.", "path": "13/getting-started", "version": "$undefined", "source": "docs/13/01-getting-started/index.mdx", "children": [ { "title": "Installation", "description": "Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.", "path": "13/getting-started/installation", "version": "$undefined", "source": "docs/13/01-getting-started/01-installation.mdx", "children": [] }, { "title": "Project Structure", "description": "A list of folders and files conventions in a Next.js project", "path": "13/getting-started/project-structure", "version": "$undefined", "source": "docs/13/01-getting-started/02-project-structure.mdx", "children": [] } ] }, { "title": "Building Your Application", "description": "Learn how to use Next.js features to build your application.", "path": "13/app/building-your-application", "version": "$undefined", "source": "docs/13/02-app/01-building-your-application/index.mdx", "children": [ { "title": "Routing", "description": "Learn the fundamentals of routing for front-end applications.", "path": "13/app/building-your-application/routing", "version": "$undefined", "source": "docs/13/02-app/01-building-your-application/01-routing/index.mdx", "children": [ { "title": "Defining Routes", "description": "Learn how to create your first route in Next.js.", "path": "13/app/building-your-application/routing/defining-routes", "version": "$undefined", "source": "docs/13/02-app/01-building-your-application/01-routing/01-defining-routes.mdx", "children": [] }, { "title": "Pages and Layouts", "description": "Create your first page and shared layout with the App Router.", "path": "13/app/building-your-application/routing/pages-and-layouts", "version": "$undefined", "source": "docs/13/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx", "children": [] }, { "title": "Linking and Navigating", "description": "Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.", "path": "13/app/building-your-application/routing/linking-and-navigating", "version": "$undefined", "source": "docs/13/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx", "children": [] }, { "title": "Route Groups", "description": "Route Groups can be used to partition your Next.js application into different sections.", "path": "13/app/building-your-application/routing/route-groups", "version": "$undefined", "source": "docs/13/02-app/01-building-your-application/01-routing/04-route-groups.mdx", "children": [] } ] } ] } ] } } ``` -------------------------------- ### useParams Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for the useParams hook. ```APIDOC ## useParams ### Description API Reference for the useParams hook. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters This hook does not take any parameters. ### Request Example ```jsx import { useParams } from 'next/navigation'; function MyComponent() { const params = useParams(); // params will contain route parameters } ``` ### Response #### Success Response (200) Returns an object containing the current route's dynamic parameters. #### Response Example ```json { "example": "{ id: '123', slug: 'my-post' }" } ``` ``` -------------------------------- ### Install Dependencies and Start Development Server Source: https://github.com/payloadcms/payload/tree/main/templates/ecommerce This command installs project dependencies using pnpm and then starts the development server. It assumes that 'pnpm' is installed and available in the environment. The '&&&' symbol is used as a command separator. ```shell pnpm install &&& pnpm dev ``` -------------------------------- ### Install Next.js App Source: https://nextjs.org/docs/app/building-your-application/routing Create a new Next.js application using the `create-next-app` command. This process sets up TypeScript, styles, and configures the `next.config.js` file for your project. No external dependencies are required beyond Node.js. ```bash npx create-next-app@latest cd my-app npm run dev ``` -------------------------------- ### redirect Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for the redirect function. ```APIDOC ## redirect ### Description API Reference for the redirect function. ### Method Not applicable (Function) ### Endpoint Not applicable (Function) ### Parameters - **url** (string) - Required - The URL to redirect to. - **options** (object) - Optional - Configuration options. - **statusCode** (number) - Optional - The HTTP status code (defaults to 307). ### Request Example ```json { "example": "redirect('/new-page')" } ``` ### Response #### Success Response (307) Performs a temporary redirect to the specified URL. #### Response Example ```json { "example": "307 Temporary Redirect response" } ``` ``` -------------------------------- ### ImageResponse Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for the ImageResponse constructor. ```APIDOC ## ImageResponse ### Description API Reference for the ImageResponse constructor. ### Method Not applicable (Constructor) ### Endpoint Not applicable (Constructor) ### Parameters - **element** (ReactNode) - Required - The React element to render. - **options** (object) - Optional - Configuration options. - **width** (number) - Optional - The width of the image in pixels. - **height** (number) - Optional - The height of the image in pixels. - **fonts** (array) - Optional - An array of font configurations. ### Request Example ```json { "example": "new ImageResponse(

Hello world

, { width: 800, height: 400 })" } ``` ### Response #### Success Response (200) Returns an image response object. #### Response Example ```json { "example": "Image response object" } ``` ``` -------------------------------- ### usePathname Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for the usePathname hook. ```APIDOC ## usePathname ### Description API Reference for the usePathname hook. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters This hook does not take any parameters. ### Request Example ```jsx import { usePathname } from 'next/navigation'; function MyComponent() { const pathname = usePathname(); // pathname will be the current URL pathname } ``` ### Response #### Success Response (200) Returns the current URL's pathname. #### Response Example ```json { "example": "/dashboard/settings" } ``` ``` -------------------------------- ### Install Dependencies and Run Local Docs Preview Source: https://github.com/payloadcms/payload/blob/main/CONTRIBUTING Steps to set up the PayloadCMS website repository, install dependencies, configure environment variables, and run the local development server to preview documentation changes. This process involves cloning the repository, installing with pnpm, creating an .env file, setting the DOCS_DIR, fetching local docs, and then running the dev server. ```shell pnpm install ``` ```shell pnpm fetchDocs:local ``` ```shell pnpm dev ``` -------------------------------- ### Google Cloud Storage Quickstart in Node.js Source: https://github.com/googleapis/nodejs-storage A basic Node.js example demonstrating how to get started with Google Cloud Storage. This typically involves initializing the client and performing a simple operation like listing buckets. ```javascript /** * Demonstrates a basic Google Cloud Storage operation. * This sample assumes you have authenticated via environment variables. * See: https://cloud.google.com/docs/authentication/getting-started */ // Imports the Google Cloud client library const {Storage} = require('@google-cloud/storage'); async function quickstart() { // Creates a client const storage = new Storage(); // Lists all buckets in the project const [buckets] = await storage.getBuckets(); console.log('Buckets:'); buckets.forEach(bucket => console.log(bucket.name)); } quickstart().catch(console.error); ``` -------------------------------- ### Configuration Options Source: https://nextjs.org/docs/app/building-your-application/deploying Details on configuring the application, including settings within `next.config.js`. ```APIDOC ## Configuration Reference This document outlines the configuration options available for the application, primarily through `next.config.js`. ### `next.config.js` Options * **allowedDevOrigins**: Specifies allowed origins during development. * **appDir**: Enables or disables the App Router. * **assetPrefix**: Prefixes all assets with a given string. * **authInterrupts**: Configuration related to authentication interruptions. * **basePath**: Prepends a path to all routes. * **browserDebugInfoInTerminal**: Controls browser debug information in the terminal. ``` -------------------------------- ### Next.js Routing Documentation Structure (JSON) Source: https://nextjs.org/docs/app/deep-dive/caching This snippet represents the structured data for Next.js routing documentation. It outlines sections like 'Getting Started', 'Installation', 'Project Structure', and detailed routing concepts within the App Router. ```json { "items": { "13": [ { "title": "Getting Started", "description": "Learn how to create full-stack web applications with Next.js.", "path": "13/getting-started", "version": null, "source": "docs/13/01-getting-started/index.mdx", "children": [ { "title": "Installation", "description": "Create a new Next.js application with \`create-next-app\`. Set up TypeScript, styles, and configure your \`next.config.js\` file.", "path": "13/getting-started/installation", "version": null, "source": "docs/13/01-getting-started/01-installation.mdx", "children": [] }, { "title": "Project Structure", "description": "A list of folders and files conventions in a Next.js project", "path": "13/getting-started/project-structure", "version": null, "source": "docs/13/01-getting-started/02-project-structure.mdx", "children": [] } ] }, { "title": "Building Your Application", "description": "Learn how to use Next.js features to build your application.", "path": "13/app/building-your-application", "version": null, "source": "docs/13/02-app/01-building-your-application/index.mdx", "children": [ { "title": "Routing", "description": "Learn the fundamentals of routing for front-end applications.", "path": "13/app/building-your-application/routing", "version": null, "source": "docs/13/02-app/01-building-your-application/01-routing/index.mdx", "children": [ { "title": "Defining Routes", "description": "Learn how to create your first route in Next.js.", "path": "13/app/building-your-application/routing/defining-routes", "version": null, "source": "docs/13/02-app/01-building-your-application/01-routing/01-defining-routes.mdx", "children": [] }, { "title": "Pages and Layouts", "description": "Create your first page and shared layout with the App Router.", "path": "13/app/building-your-application/routing/pages-and-layouts", "version": null, "source": "docs/13/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx", "children": [] }, { "title": "Linking and Navigating", "description": "Learn how navigation works in Next.js, and how to use the Link Component and \`useRouter\` hook.", "path": "13/app/building-your-application/routing/linking-and-navigating", "version": null, "source": "docs/13/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx", "children": [] }, { "title": "Route Groups", "description": "Route Groups can be used to partition your Next.js application into different sections.", "path": "13/app/building-your-application" } ] } ] } ] } } ``` -------------------------------- ### Create Payload App with Draft Preview Example Source: https://github.com/payloadcms/payload/tree/main/examples/draft-preview This command initializes a new Payload CMS project with the draft preview example already configured. It sets up the necessary files and dependencies for the example. ```bash npx create-payload-app --example draft-preview ``` -------------------------------- ### CLI - create-next-app Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for the create-next-app CLI tool. ```APIDOC ## CLI - create-next-app Create Next.js apps using one command with the `create-next-app` CLI. ``` -------------------------------- ### Basic API Route Example - TypeScript Source: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/ A simple example of an API route handler in TypeScript. This route is configured to handle GET requests and returns a JSON response. ```ts import type { NextApiRequest, NextApiResponse } from "next"; type Data = { name: string; }; export default function handler(req: NextApiRequest, res: NextApiResponse) { res.status(200).json({ name: "John Doe" }); } ``` -------------------------------- ### Sentry Installation using Sentry Wizard Source: https://docs.sentry.io/platforms/javascript/guides/nextjs/ Command to initiate the Sentry installation wizard for a Next.js project. The wizard simplifies the setup process by guiding users through feature selection and configuration. ```bash npx @sentry/wizard@latest -i nextjs ``` -------------------------------- ### Configuration: next.config.js Options Source: https://nextjs.org/docs/app/building-your-application/deploying Documentation for various options available in the next.config.js file. ```APIDOC ## next.config.js Options ### Description Configuration options for customizing Next.js build and runtime behavior. ### Method N/A (Configuration File) ### Endpoint N/A ### Parameters Refer to individual option documentation below. ### Request Example ```javascript // next.config.js module.exports = { reactStrictMode: true, images: { domains: ['example.com'], }, }; ``` ### Response N/A #### Individual Options: - **allowedDevOrigins** - **Description**: Whitelist URLs that can be served during development. - **Type**: `Array` - **Default**: `[]` - **assetPrefix** - **Description**: Prefixes all assets with the specified path. Useful for CDNs. - **Type**: `string` - **Default**: `''` - **basePath** - **Description**: Adds a prefix to all routes in the application. Useful for multi-tenant applications. - **Type**: `string` - **Default**: `''` - **bundlePagesRouterDependencies** - **Description**: Bundles dependencies for the pages router, improving performance. - **Type**: `boolean` - **Default**: `false` - **compress** - **Description**: Enables gzip compression for server responses. - **Type**: `boolean` - **Default**: `true` - **crossOrigin** - **Description**: Configures cross-origin resource sharing for assets. - **Type**: `object` - **Default**: `undefined` - **devIndicators** - **Description**: Customizes the development server indicators. - **Type**: `object` - **Default**: `{}` - **distDir** - **Description**: Specifies the output directory for the build. - **Type**: `string` - **Default**: `.next` - **env** - **Description**: Exposes environment variables to the Next.js application at build time. - **Type**: `object` - **Default**: `{}` - **eslint** - **Description**: Enables or disables ESLint during the build process. - **Type**: `object` - **Default**: `{}` - **exportPathMap** - **Description**: A function to generate a path map for exporting the application statically. - **Type**: `function` - **Default**: `undefined` - **generateBuildId** - **Description**: A function to generate a custom build ID. - **Type**: `function` - **Default**: `undefined` - **generateEtags** - **Description**: Enables or disables ETag generation for responses. - **Type**: `object` - **Default**: `{}` - **headers** - **Description**: Adds custom headers to responses. - **Type**: `Array` - **Default**: `[]` - **httpAgentOptions** - **Description**: Options for the Node.js HTTP agent used for outgoing requests. - **Type**: `object` - **Default**: `{}` - **images** - **Description**: Configuration for image optimization. - **Type**: `object` - **Default**: `{}` - **onDemandEntries** - **Description**: Configures on-demand compilation of pages. - **Type**: `object` - **Default**: `{}` - **optimizePackageImports** - **Description**: Enables automatic import optimization for packages. - **Type**: `boolean` - **Default**: `false` - **output** - **Description**: Specifies the output mode for the build (e.g., 'standalone'). - **Type**: `string` - **Default**: `'standalone'` (when `output: 'standalone'` is set) - **pageExtensions** - **Description**: Defines the file extensions that Next.js treats as pages. - **Type**: `Array` - **Default**: `['tsx', 'ts', 'jsx', 'js']` - **poweredByHeader** - **Description**: Controls the 'X-Powered-By' header. - **Type**: `boolean` - **Default**: `true` - **productionBrowserSourceMaps** - **Description**: Enables source maps for the browser build in production. - **Type**: `boolean` - **Default**: `false` - **reactStrictMode** - **Description**: Enables React Strict Mode for the application. - **Type**: `boolean` - **Default**: `false` ``` -------------------------------- ### Next.js Page Rendering Example Source: https://nextjs.org/docs/app/building-your-application/routing This is a basic example of a page component in Next.js. It demonstrates how to render a simple heading element using JSX. The `Page` component is a standard functional component that returns JSX. ```jsx Page() { return

Hello Next.js!

} ``` -------------------------------- ### useRouter Hook Source: https://nextjs.org/docs/app/building-your-application/deploying API reference for the useRouter hook. ```APIDOC ## GET /api/functions/use-router ### Description API reference for the useRouter hook. ### Method GET ### Endpoint /api/functions/use-router ### Parameters #### Query Parameters #### Request Body ### Request Example ```json {} ``` ### Response #### Success Response (200) - **router** (object) - The router object. #### Response Example ```json { "router": { "pathname": "/", "query": {}, "asPath": "/", "isReady": true } } ``` ``` -------------------------------- ### Create Payload App with Whitelabel Example Source: https://github.com/payloadcms/payload/tree/main/examples/whitelabel This command utilizes npx to create a new Payload CMS project initialized with the whitelabel example configuration. It simplifies the setup process for users who want to start with a pre-configured admin panel. ```bash npx create-payload-app --example whitelabel ``` -------------------------------- ### Stripe Terminal Quickstart Source: https://stripe.com/docs/cli/trigger Initiates the Stripe Terminal quickstart process, specifically designed to help users get started quickly with Stripe Terminal and the Verifone P400 reader. This command requires an API key to be provided via a flag. ```bash stripe terminal quickstart --api-key= ``` -------------------------------- ### Run use-context-selector counter example Source: https://github.com/dai-shi/use-context-selector This command demonstrates how to run the first example, '01_counter', of the use-context-selector library. It sets the PORT environment variable and then executes the run command using pnpm. The example can then be accessed via a web browser. ```shell PORT=8080 pnpm run examples:01_counter ``` -------------------------------- ### Next.js Installation with create-next-app Source: https://nextjs.org/docs/app/building-your-application/configuring/draft-mode Learn how to create a new Next.js application using the `create-next-app` command. This includes setting up TypeScript, styles, and configuring the `next.config.js` file for optimal project setup. ```bash npx create-next-app@latest my-app cd my-app npm run dev ``` -------------------------------- ### Next.js File-system Conventions API Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for Next.js file-system conventions. ```APIDOC ## Next.js File-system Conventions API Reference This section details the API reference for Next.js file-system conventions. ### default.js **Description**: API Reference for the default.js file. ### Dynamic Segments **Description**: Dynamic Route Segments can be used to programmatically generate route segments from dynamic data. ### error.js **Description**: API reference for the error.js special file. ### forbidden.js **Description**: API reference for the forbidden.js special file. ### instrumentation.js **Description**: API reference for the instrumentation.js file. ### instrumentation-client.js **Description**: Learn how to add client-side instrumentation to track and monitor your Next.js application's frontend performance. ### Intercepting Routes **Description**: Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals. ### layout.js **Description**: API reference for the layout.js file. ### loading.js **Description**: API reference for the loading.js special file. ``` -------------------------------- ### Stripe CLI GET Request Example Source: https://stripe.com/docs/cli/trigger This snippet demonstrates how to retrieve an API object using the Stripe CLI's 'get' command. It shows the arguments for specifying the object ID and path, along with various flags for controlling the request and response. Dependencies include the Stripe CLI installation. ```shell stripe get charges CH_1OKcnt2eZvKYlo2C99k9lfXl --show-headers ``` -------------------------------- ### Run Development Server Command Source: https://nextjs.org/docs/app/building-your-application/deploying This command is used to start the development server locally. It is recommended for development on Mac and Windows for better performance compared to using Docker. ```bash npm run dev ``` -------------------------------- ### Create Nested Routes (Next.js Example) Source: https://nextjs.org/docs/app/building-your-application/routing This example illustrates how to create nested routes within a web application framework, likely Next.js. It shows the file structure required, where a folder named `[slug]` inside a `blog` folder, along with a `page.js` file, defines a route for individual blog posts. ```plaintext You can continue nesting folders to create nested routes. For example, to create a route for a specific blog post, create a new [slug] folder inside blog and add a page file: ``` -------------------------------- ### ESLint Configuration Source: https://nextjs.org/docs/app/building-your-application/deploying Information on using and configuring the ESLint plugin for Next.js applications. ```APIDOC ## ESLint Configuration ### Description Learn how to use and configure the ESLint plugin to catch common issues and problems in a Next.js application. ### Method N/A (Configuration Option) ### Endpoint N/A ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **`eslint.ignoreDuringBuilds`** (boolean) - Optional - Ignores ESLint errors during build. ### Request Example ```json { "eslint": { "ignoreDuringBuilds": true } } ``` ### Response #### Success Response (200) N/A (Configuration setting) #### Response Example N/A ``` -------------------------------- ### CLI - next CLI Source: https://nextjs.org/docs/app/building-your-application/deploying API Reference for the next CLI tool. ```APIDOC ## CLI - next CLI API Reference for the Next.js Command Line Interface (CLI) tools, specifically the `next` command. ``` -------------------------------- ### Next.js Nested Route Creation Source: https://nextjs.org/docs/app/building-your-application/routing Illustrates how to create nested routes in Next.js by using nested folders and 'page.tsx' files. It explains the concept of root, segment, and leaf segments and provides an example for a '/blog/[slug]' route. ```javascript self.__next_f.push([1,"53:[\"$\",\"h2\",null,{\"id\":\"creating-a-nested-route\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"$L3a\",null,{\"href\":\"#creating-a-nested-route\",\"children\":[\"Creating a nested route\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]\n"]) ``` ```javascript self.__next_f.push([1,"54:[\"$\",\"p\",null,{\"children\":[\"A nested route is a route composed of multiple URL segments. For example, the \",[\"$\",\"code\",null,{\"children\":\"/blog/[slug]\"}],\" route is composed of three segments:\" ]})\n55:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"/\"}],\" (Root Segment)\"]}]},\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"blog\"}],\" (Segment)\"]}]},\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"[slug]\"}],\" (Leaf Segment)\"]}]},\"\\n\" ]})\n56:[\"$\",\"p\",null,{\"children\":[\"In Next.js:\" ]})\n57:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Folders\"}],\" are used to define the route segments that map to URL segments.\" ]}]},\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Files\"}],\" (like \",[\"$\",\"code\",null,{\"children\":\"page\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"layout\"}],\" ) are used to create UI that is shown for a segment.\" ]}]},\"\\n\" ]})\n58:[\"$\",\"p\",null,{\"children\":[\"To create nested routes, you can nest folders inside each other. For example, to add a route for \",[\"$\",\"code\",null,{\"children\":\"/blog\"}],\", create a folder called \",[\"$\",\"code\",null,{\"children\":\"blog\"}],\" in the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" directory. Then, to make \",[\"$\",\"code\",null,{\"children\":\"/blog\"}],\" publicly accessible, add a \",[\"$\",\"code\",null,{\"children\":\"page.tsx\"}],\" file:\" ]})\n59:[\"$\",\"figure\",null,{\"children\":[[[\"$\",\"$L44\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100 dark:hidden\",\"width\":\"1600\",\"height\":\"525\",\"alt\":\"File hierarchy showing blog folder and a page.js file\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/docs/light/blog-nested-route.png\"}], [\"$\",\"$L44\",null,{\"className\":\"rounded-md border border-gray ``` -------------------------------- ### Page Component Accessing Search Params in TypeScript Source: https://nextjs.org/docs/app/building-your-application/routing A Server Component example demonstrating how to access search parameters in Next.js. It retrieves a 'filters' parameter from the searchParams prop. Accessing searchParams opts the page into dynamic rendering. ```typescript export default async function Page({ searchParams, }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) { const filters = (await searchParams).filters } ``` -------------------------------- ### Configuration Source: https://nextjs.org/docs/app/building-your-application/deploying Learn how to configure your Next.js application, including options available in `next.config.js`. ```APIDOC ## GET /api-reference/config/next-config-js ### Description Learn about the options available in `next.config.js` for the Pages Router. ### Method GET ### Endpoint `/api-reference/config/next-config-js` ### Parameters N/A ### Request Body N/A ### Response N/A ### Request Example ```javascript // next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { // Your Next.js configuration options here }; module.exports = nextConfig; ``` ### Success Response (200) N/A (This is a configuration documentation, not a typical API response) ### Response Example N/A ``` ```APIDOC ## GET /api-reference/config/next-config-js/allowedDevOrigins ### Description Use `allowedDevOrigins` to configure additional origins that can request the dev server. ### Method GET ### Endpoint `/api-reference/config/next-config-js/allowedDevOrigins` ### Parameters N/A ### Request Body N/A ### Response N/A ### Request Example ```javascript // next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { allowedDevOrigins: ['example.com', '*.example.net'], }, }; module.exports = nextConfig; ``` ### Success Response (200) N/A (This is a configuration documentation, not a typical API response) ### Response Example N/A ``` -------------------------------- ### Create a basic page component in Next.js Source: https://nextjs.org/docs/app/building-your-application/routing Defines a simple React component to render UI for a specific route. This example shows how to create an index page (`/`) by exporting a React component from `app/page.tsx`. It assumes a React environment. ```typescript export default function Page() { return

Hello Next.js!

} ``` -------------------------------- ### next.config.js Options - env Source: https://nextjs.org/docs/app/building-your-application/deploying Learn to add and access environment variables. ```APIDOC ## GET /api/next-config-js/env ### Description Learn to add and access environment variables. ### Method GET ### Endpoint /api/next-config-js/env ### Parameters #### Query Parameters #### Request Body ### Request Example ```json {} ``` ### Response #### Success Response (200) - **env** (object) - Environment variables. #### Response Example ```json { "env": { "MY_VAR": "my-value" } } ``` ``` -------------------------------- ### Static Export of Next.js Application Source: https://nextjs.org/docs/app/building-your-application/deploying Guides on performing a static export of a Next.js application, allowing it to be deployed as static HTML, CSS, and JavaScript assets on any web server. Note that features requiring a server are not supported with static exports. ```bash # Example command for static export (not explicitly provided in text, conceptual) # npm run build -- --output=export ``` -------------------------------- ### Next.js Configuration API Reference Source: https://nextjs.org/docs/app/building-your-application/deploying This section provides documentation for individual Next.js configuration options, explaining their purpose and usage. ```APIDOC ## Next.js Configuration Options This document outlines various configuration options available for Next.js applications. ### productionBrowserSourceMaps * **Description**: Configure source maps for the production browser build. * **Endpoint**: `/app/api-reference/config/next-config-js/productionBrowserSourceMaps` ### reactCompiler * **Description**: Enable the React Compiler to automatically optimize component rendering. * **Version**: experimental * **Endpoint**: `/app/api-reference/config/next-config-js/reactCompiler` ### reactMaxHeadersLength * **Description**: The maximum length of the headers that are emitted by React and added to the response. * **Endpoint**: `/app/api-reference/config/next-config-js/reactMaxHeadersLength` ### reactStrictMode * **Description**: The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in. * **Endpoint**: `/app/api-reference/config/next-config-js/reactStrictMode` ### redirects * **Description**: Add redirects to your Next.js app. * **Endpoint**: `/app/api-reference/config/next-config-js/redirects` ### rewrites * **Description**: Add rewrites to your Next.js app. * **Endpoint**: `/app/api-reference/config/next-config-js/rewrites` ### sassOptions * **Description**: Configure Sass options. * **Endpoint**: `/app/api-reference/config/next-config-js/sassOptions` ### serverActions * **Description**: Configure Server Actions behavior in your Next.js application. * **Endpoint**: `/app/api-reference/config/next-config-js/serverActions` ### serverComponentsHmrCache * **Description**: Configure whether fetch responses in Server Components are cached across HMR refresh requests. * **Version**: experimental * **Endpoint**: `/app/api-reference/config/next-config-js/serverComponentsHmrCache` ### serverExternalPackages * **Description**: Opt-out specific dependencies from the Server Components bundling and use native Node.js `require`. * **Endpoint**: `/app/api-reference/config/next-config-js/serverExternalPackages` ### staleTimes * **Description**: Learn how to override the invalidation time of the Client Router Cache. * **Version**: experimental * **Endpoint**: `/app/api-reference/config/next-config-js/staleTimes` ### staticGeneration * **Description**: Learn how to configure static generation in your Next.js application. * **Version**: experimental * **Endpoint**: `/app/api-reference/config/next-config-js/staticGeneration` ### taint * **Description**: Enable tainting Objects and Values. * **Version**: experimental * **Endpoint**: `/app/api-reference/config/next-config-js/taint` ### trailingSlash * **Description**: Configure Next.js pages to resolve with or without a trailing slash. * **Endpoint**: `/app/api-reference/config/next-config-js/trailingSlash` ### transpilePackages * **Description**: Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`). ``` -------------------------------- ### Clone Payload App using create-payload-app CLI Source: https://github.com/payloadcms/payload/tree/main/templates/website This method uses the create-payload-app CLI to clone a specified template directly to your machine. It's a convenient way to start a new project with a pre-defined structure. Ensure you have Node.js and npm/npx installed. ```shell pnpx create-payload-app my-project -t website ```