@cloudflare/next-on-pages
Reference:
Quick Start
-
npx create-next-app@latest my-app -
cdinto the new directory (e.g.cd my-app) -
npm install -D @cloudflare/next-on-pages vercel -
Configure the project to use the Edge Runtime:
-
Replace
pages/api/hello.jswith the following:// Next.js Edge API Routes: https://nextjs.org/docs/api-routes/edge-api-routes export const config = { runtime: "experimental-edge", }; export default async function (req) { return new Response(JSON.stringify({ name: "John Doe" }), { status: 200, headers: { "Content-Type": "application/json", }, }); }
-
Add the following to
next.config.js:/** @type {import('next').NextConfig} */ const nextConfig = { + experimental: { + runtime: "experimental-edge", + }, reactStrictMode: true, swcMinify: true, }; module.exports = nextConfig;
-
-
git commitandgit pushto a GitHub/GitLab repository. -
Create a Pages project, connect that repository, and select "Next.js" from the framework preset list.
Option Value Build command npx @cloudflare/next-on-pages --experimental-minifyBuild output directory .vercel/output/static -
Add a
NODE_VERSIONenvironment variable set to14or greater. -
In the Pages project Settings > Functions > Compatibility Flags, add the
transformstream_enable_standard_constructorandstreams_enable_constructorsflags. These will not be necessary once they graduate to be on by default on 2022-11-30's compatibility date. -
The project should now be ready to deploy. Create a new deployment.
@cloudflare/next-on-pages CLI
⚡️ @cloudflare/next-to-pages CLI
⚡️
⚡️ Usage: npx @cloudflare/next-to-pages [options]
⚡️
⚡️ Options:
⚡️
⚡️ --help: Shows this help message
⚡️
⚡️ --skip-build: Doesn't run 'vercel build' automatically
⚡️
⚡️ --experimental-minify: Attempts to minify the functions of a project (by de-duping webpack chunks)
⚡️
⚡️ --watch: Automatically rebuilds when the project is edited
⚡️
⚡️
⚡️ GitHub: https://github.com/cloudflare/next-on-pages
⚡️ Docs: https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/
Local testing
In one terminal, run npx @cloudflare/next-on-pages --watch, and in another npx wrangler pages dev .vercel/output/static --compatibility-flags=streams_enable_constructors. We hope to soon make improvements to the refersh speed.
Build Output Configuration
config.json property |
Support |
|---|---|
| version | 3 |
routes src |
|
routes dest |
|
routes headers |
🔄 |
routes methods |
|
routes continue |
|
routes caseSensitive |
|
routes check |
|
routes status |
|
routes has |
|
routes missing |
✅ |
routes locale |
|
routes middlewarePath |
✅ |
| images | |
| wildcard | |
| overrides | |
| cache |
Examples
Edge API Routes
// ./pages/api/some_route.ts
import type { NextRequest } from "next/server";
export const config = {
runtime: "experimental-edge",
};
export default async function handler(req: NextRequest) {
return new Response(
JSON.stringify({
name: process.env.NEXT_RUNTIME,
}),
{
status: 200,
headers: {
"content-type": "application/json",
},
}
);
}Server-side rendering (SSR) pages with getServerSideProps()
// ./pages/ssr.tsx
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
export const config = {
runtime: "experimental-edge",
};
export const getServerSideProps = async () => {
return {
props: {
runtime: process.env.NEXT_RUNTIME,
uuid: await fetch("https://uuid.rocks/plain").then((response) =>
response.text()
),
},
};
};
const Home: NextPage<{ runtime: string; uuid: string }> = ({
runtime,
uuid,
}) => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to{" "}
<a href="https://nextjs.org">Next.js, running at the {runtime}!</a>
</h1>
<p className={styles.description}>
Get started by editing{" "}
<code className={styles.code}>pages/index.tsx</code>
</p>
<p className={styles.description}>
Here's a server-side UUID:
<code className={styles.code}>{uuid}</code>
</p>
</main>
</div>
);
};
export default Home;Middleware
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
return NextResponse.redirect(new URL("/about-2", request.url));
}
export const config = {
matcher: "/about/:path*",
};