[Pages] Simplify Next.js docs (and port over content from next-on-pages repo)

content/_redirects

@@ -761,6 +761,7 @@
 /pages/how-to/deploy-a-jekyll-site/ /pages/framework-guides/deploy-a-jekyll-site/ 301
 /pages/how-to/deploy-a-nextjs-site/ /pages/framework-guides/nextjs/ 301
 /pages/framework-guides/deploy-a-nextjs-site/ /pages/framework-guides/nextjs/ 301
+/pages/framework-guides/nextjs/deploy-a-nextjs-site/ /pages/framework-guides/nextjs/ssr/get-started/ 301
 /pages/how-to/deploy-anything/ /pages/framework-guides/deploy-anything/ 301
 /pages/how-to/deploy-a-react-application/ /pages/framework-guides/deploy-a-react-site/ 301
 /pages/framework-guides/deploy-a-react-application/ /pages/framework-guides/deploy-a-react-site/ 301
@@ -1123,7 +1124,7 @@
 /r2/buckets/data-location/ /r2/reference/data-location/ 301
 /r2/reference/audit-logs/ /r2/platform/audit-logs/ 301
 /r2/reference/changelog/ /r2/platform/changelog/ 301
-/r2/reference/changelog/index.xml /r2/platform/changelog/index.xml 301 
+/r2/reference/changelog/index.xml /r2/platform/changelog/index.xml 301
 /r2/reference/limits/ /r2/platform/limits/ 301
 /r2/reference/metrics-analytics/ /r2/platform/metrics-analytics/ 301
 

content/pages/framework-guides/nextjs/deploy-a-static-nextjs-site.md

@@ -1,15 +1,16 @@
 ---
 pcx_content_type: how-to
-title: Static deployment
+title: Static site
 meta:
-  description: Deploy a static Next.js site with static exports.
+  title: Get started | Static site | Next.js apps
+  description: Deploy a static site built using Next.js to Cloudflare Pages
 ---
 
 # Deploy a static Next.js site
 
 {{<Aside type="note">}}
 
-Do not use this guide unless you have a specific use case for static exports. Cloudflare recommends using the [Deploy a Next.js site](/pages/framework-guides/nextjs/deploy-a-nextjs-site/) guide.
+Do not use this guide unless you have a specific use case for static exports. Cloudflare recommends using the [Deploy a Next.js site](/pages/framework-guides/nextjs/ssr/get-started/) guide.
 
 {{</Aside>}}
 

content/pages/framework-guides/nextjs/ssr/_index.md

@@ -0,0 +1,11 @@
+---
+type: overview
+pcx_content_type: navigation
+title: Full-stack (SSR)
+---
+
+# Next.js
+
+[Next.js](https://nextjs.org) is an open-source React.js framework for building full-stack applications. This section helps you deploy a full-stack Next.js project to Cloudflare Pages using [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages/tree/main/packages/next-on-pages/docs).
+
+{{<directory-listing>}}

content/pages/framework-guides/nextjs/ssr/advanced.md

@@ -0,0 +1,45 @@
+---
+pcx_content_type: reference
+title: Advanced Usage
+weight: 8
+meta:
+  title: Advanced Usage
+---
+
+# Advanced Usage
+
+## Custom Worker Entrypoint
+
+If you need to run code before or after your Next.js application, create your own Worker entrypoint and forward requests to your Next.js application.
+
+This can help you intercept logs from your app, catch and handle uncaught exceptions, or add additional context to incoming requests or outgoing responses.
+
+1. Create a new file in your Next.js project, with a [`fetch()` handler](/workers/runtime-apis/handlers/fetch/), that looks like this:
+
+  ```ts
+  ---
+  filename: ./custom-entrypoint.ts
+  ---
+  import nextOnPagesHandler from '@cloudflare/next-on-pages/fetch-handler';
+
+  export default {
+    async fetch(request, env, ctx) {
+      // do something before running the next-on-pages handler
+
+      const response = await nextOnPagesHandler.fetch(request, env, ctx);
+
+      // do something after running the next-on-pages handler
+
+      return response;
+    },
+  } as ExportedHandler<{ ASSETS: Fetcher }>;
+  ```
+
+  This looks like a Worker — but it does not need its own `wrangler.toml` file. You can think of it purely as code that `@cloudflare/next-on-pages` will then use to wrap the output of the build that is deployed to your Cloudflare Pages project.
+
+
+2. Pass the entrypoint argument to the next-on-pages CLI with the path to your handler.
+
+```sh
+$ npx @cloudflare/next-on-pages --custom-entrypoint=./custom-entrypoint.ts
+```

content/pages/framework-guides/nextjs/ssr/bindings.md

@@ -0,0 +1,80 @@
+---
+pcx_content_type: reference
+title: Bindings
+weight: 2
+meta:
+  title: Using bindings in your Next.js app
+---
+
+# Using bindings in your Next.js app
+
+Once you have [set up next-on-pages](/pages/framework-guides/nextjs/ssr/get-started/), you can access [bindings](/workers/runtime-apis/bindings/) from any route of your Next.js app via `getRequestContext`:
+
+```js
+import { getRequestContext } from "@cloudflare/next-on-pages";
+
+export const runtime = "edge";
+
+export async function GET(request) {
+  let responseText = "Hello World";
+
+  const myKv = getRequestContext().env.MY_KV_NAMESPACE;
+  await myKv.put("foo", "bar");
+  const foo = await myKv.get("foo");
+
+  return new Response(foo);
+}
+```
+
+Add bindings to your Pages project by [adding them to your `wrangler.toml` configuration file](/pages/functions/wrangler-configuration/).
+
+## TypeScript type declarations for bindings
+
+To ensure that the `env` object from `getRequestContext().env` above has accurate TypeScript types, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and create a [TypeScript declaration file](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html).
+
+Install Workers Types:
+
+```sh
+$ npm install --save-dev @cloudflare/workers-types
+```
+
+Add Workers Types to your `tsconfig.json` file, replacing the date below with your project's [compatibility date](/workers/configuration/compatibility-dates/):
+
+```diff
+---
+header: tsconfig.json
+---
+    "types": [
++        "@cloudflare/workers-types/2024-07-29"
+    ]
+```
+
+Create an `env.d.ts` file in the root directory of your Next.js app, and explicitly declare the type of each binding:
+
+```ts
+---
+header: env.d.ts
+---
+interface CloudflareEnv {
+	MY_KV_1: KVNamespace;
+	MY_KV_2: KVNamespace;
+	MY_R2: R2Bucket;
+	MY_DO: DurableObjectNamespace;
+}
+```
+
+## Other Cloudflare APIs (`cf`, `ctx`)
+
+Access context about the incoming request from the [`cf` object](/workers/runtime-apis/request/#incomingrequestcfproperties), as well as [lifecycle methods from the `ctx` object](/workers/runtime-apis/handlers/fetch/#lifecycle-methods) from the return value of [`getRequestContext()`](https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/src/api/getRequestContext.ts):
+
+```js
+import { getRequestContext } from '@cloudflare/next-on-pages';
+
+export const runtime = "edge";
+
+export async function GET(request) {
+  const { env, cf, ctx } = getRequestContext();
+
+  // ...
+}
+```

content/pages/framework-guides/nextjs/ssr/caching.md

@@ -0,0 +1,38 @@
+---
+pcx_content_type: reference
+title: Caching
+meta:
+  title: Caching and data revalidation in your Next.js app
+---
+
+# Caching and data revalidation
+
+[`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) supports [caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data) and [revalidating](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) data returned by subrequests you make in your app by calling [`fetch()`](/workers/runtime-apis/fetch/).
+
+By default, all `fetch()` subrequests made in your Next.js app are cached. Refer to the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/caching#opting-out-1) for information about how to disable caching for an individual subrequest, or for an entire route.
+
+[The cache persists across deployments](https://nextjs.org/docs/app/building-your-application/caching#data-cache). You are responsible for revalidating/purging this cache.
+
+## Storage options
+
+You can configure your Next.js app to write cache entries to and read from either [Workers KV](/kv/) or the [Cache API](/workers/runtime-apis/cache/).
+
+### Workers KV (recommended)
+
+It takes an extra step to enable, but Cloudflare recommends caching data using [Workers KV](/kv/).
+
+When you write cached data to Workers KV, you write to storage that can be read by any Cloudflare location. This means your app can fetch data, cache it in KV, and then subsequent requests anywhere around the world can read from this cache.
+
+<Aside type="note">
+
+Workers KV is eventually consistent, which means that it can take up to 60 seconds for updates to be reflected globally.
+
+</Aside>
+
+To use Workers KV as the cache for your Next.js app, [add a KV binding](/pages/functions/bindings/#kv-namespaces) to your Pages project, and set the name of the binding to `__NEXT_ON_PAGES__KV_SUSPENSE_CACHE`.
+
+### Cache API (default)
+
+The [Cache API](https://developers.cloudflare.com/workers/runtime-apis/cache/) is the default option for caching data in your Next.js app. You do not need to take any action to enable the Cache API.
+
+In contrast with Workers KV, when you write data using the Cache API, data is only cached in the Cloudflare location that you are writing data from.

content/pages/framework-guides/nextjs/ssr/get-started.md

@@ -0,0 +1,137 @@
+---
+pcx_content_type: get-started
+title: Get started
+weight: 1
+meta:
+  title: Get started | Full-stack (SSR) | Next.js apps
+  description: Deploy a full-stack Next.js app to Cloudflare Pages
+---
+
+# Next.js
+
+Learn how to deploy full-stack (SSR) Next.js apps to Cloudflare Pages.
+
+## New apps
+
+To create a new Next.js app, pre-configured to run on Cloudflare, run:
+
+```sh
+$ npm create cloudflare@latest my-next-app -- --framework=next
+```
+
+For more guidance on developing your app, refer to [Bindings](/pages/framework-guides/nextjs/ssr/bindings/) or the [Next.js documentation](https://nextjs.org).
+
+---
+
+## Existing apps
+
+
+### 1. Install next-on-pages
+
+First, install [@cloudflare/next-on-pages](https://github.com/cloudflare/next-on-pages):
+
+```sh
+$ npm install --save-dev @cloudflare/next-on-pages
+```
+
+### 2. Add `wrangler.toml` file
+
+Then, add a [`wrangler.toml`](/pages/functions/wrangler-configuration/) file to the root directory of your Next.js app:
+
+```toml
+name = "my-app"
+compatibility_date = "2024-07-29"
+compatibility_flags = ["nodejs_compat"]
+pages_build_output_dir = ".vercel/output/static"
+```
+
+This is where you configure your Pages project and define what resources it can access via [bindings](/workers/runtime-apis/bindings/).
+
+### 3. Update `next.config.mjs`
+
+Next, update the content in your `next.config.mjs` file.
+
+```diff
+---
+header: next.config.mjs
+---
++ import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
++ if (process.env.NODE_ENV === 'development') {
++   await setupDevPlatform();
++ }
+
+export default nextConfig;
+```
+
+These changes allows you to access [bindings](/pages/framework-guides/nextjs/ssr/bindings/) in local development.
+
+### 4. Ensure all server-rendered routes use the Edge Runtime
+
+Next.js has [two "runtimes"](https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes) — "Edge" and "Node.js". When you run your Next.js app on Cloudflare, you [can use available Node.js APIs](/workers/runtime-apis/nodejs/) — but you currently can only use Next.js' "Edge" runtime.
+
+This means that for each server-rendered route — ex: an API route or one that uses `getServerSideProps` — you must configure it to use the "Edge" runtime:
+
+```js
+export const runtime = "edge";
+```
+
+### 5. Update `package.json`
+
+Add the following to the scripts field of your `package.json` file:
+
+```json
+---
+header: package.json
+---
+"pages:build": "npx @cloudflare/next-on-pages",
+"preview": "npm run pages:build && wrangler pages dev",
+"deploy": "npm run pages:build && wrangler pages deploy"
+```
+
+- `npm run pages:build`: Runs `next build`, and then transforms its output to be compatible with Cloudflare Pages.
+- `npm run preview`: Builds your app, and runs it locally in [workerd](https://github.com/cloudflare/workerd), the open-source Workers Runtime. (`next dev` will only run your app in Node.js)
+- `npm run deploy`: Builds your app, and then deploys it to Cloudflare
+
+### 6. Deploy to Cloudflare Pages
+
+Either deploy via the command line:
+
+```sh
+$ npm run deploy
+```
+
+Or [connect a Github or Gitlab repository](/pages/get-started/git-integration/), and Cloudflare will automatically build and deploy each pull request you merge to your production branch.
+
+### 7. (Optional) Add `eslint-plugin-next-on-pages`
+
+Optionally, you might want to add `eslint-plugin-next-on-pages`, which lints your Next.js app to ensure it is configured correctly to run on Cloudflare Pages.
+
+```sh
+$ npm install --save-dev eslint-plugin-next-on-pages
+```
+
+Once it is installed, add the following to `.eslintrc.json`:
+
+```diff
+---
+header: .eslintrc.json
+---
+{
+  "extends": [
+    "next/core-web-vitals",
++    "plugin:eslint-plugin-next-on-pages/recommended"
+  ],
+  "plugins": [
++    "eslint-plugin-next-on-pages"
+  ]
+}
+```
+
+## Related resources
+
+- [Bindings](/pages/framework-guides/nextjs/ssr/bindings/)
+- [Troubleshooting](/pages/framework-guides/nextjs/ssr/troubleshooting/)

content/pages/framework-guides/nextjs/ssr/static-assets.md

@@ -0,0 +1,28 @@
+---
+pcx_content_type: reference
+title: Routing static assets
+meta:
+  title: Routing static assets | Full-stack (SSR) | Next.js apps
+---
+
+# Routing static assets
+
+When you use a JavaScript framework like Next.js on Cloudflare Pages, the framework adapter (ex: `@cloudflare/next-on-pages`) automatically generates a [`_routes.json` file](/pages/functions/routing/#create-a-_routesjson-file), which defines specific paths of your app's static assets. This file tells Cloudflare, `for these paths, don't run the Worker, you can just serve the static asset on this path` (an image, a chunk of client-side JavaScript, etc.)
+
+The framework adapter handles this for you — you typically shouldn't need to create your own `_routes.json` file.
+
+If you need to, you can define your own `_routes.json` file in the root directory of your project. For example, you might want to declare the `/favicon.ico` path as a static asset where the Worker should not be invoked.
+
+You would add it to the `excludes` filed of your `_routes.json` file:
+
+```json
+---
+header: _routes.json
+---
+{
+	"version": 1,
+	"exclude": ["/favicon.ico"]
+}
+```
+
+During the build process, `@cloudflare/next-on-pages` will automatically generate its own `_routes.json` file in the output directory. Any entries that are provided in your own `_routes.json` file (in the project's root directory) will be merged with the generated file.