[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/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);
+}
+```
+
+You can 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, you need to 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`)
+
+You can 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,34 @@
+---
+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 you make 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.
+
+Note that Workers KV is eventually consistent, which means that it can take up to 60 seconds for updates to be reflected globally.
+
+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,138 @@
+---
+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 your Full-stack (SSR) Next.js on Cloudflare.
+
+## New apps
+
+For new Next.js apps, use the following command to launch an interactive building experience:
+
+```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
+
+For existing apps, you need to perform a few more steps.
+
+### 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
+
+Cloudflare Pages supports defining a list of patterns that should (or should not) invoke your worker script. This is useful when using a library like [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) as it allows you to exclude certain static assets, like a favicon, from invoking the routing system on each request, saving you money and improving performance.
+
+To opt-out certain static assets, you can create an _routes.json file in your project. This file can specify which assets to [include or exclude](/pages/functions/routing/#create-a-_routesjson-file) from invoking the worker script.
+
+For example, to exclude the `/favicon.ico` asset from invoking the worker script, you can create the following _routes.json file in the root directory of your project:
+
+```json
+---
+header: _routes.json
+---
+{
+	"version": 1,
+	"exclude": ["/favicon.ico"]
+}
+```
+
+During the build process, `@cloudflare/next-on-pages` will automatically generate an `_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 and take effect when deployed to Cloudflare Pages.
+
+The `_routes.json` file should only be used for static assets that do not need to go through the routing system. It should not be used for routes as this could lead to unexpected behavior and incorrect routing.