OpenNext for Cloudflare

The blog-starter example demonstrates Next.js Static Generation using Markdown files.

• Data Storage: Blog posts are stored in the /_posts directory as Markdown files.
• Metadata: Post metadata is parsed using gray-matter and passed as props to the page.
• Content Conversion: Markdown content is converted into HTML strings using remark and remark-html before being sent as props to the page.
• Styling: The project uses Tailwind CSS (v3.0).

Next.js Middleware allows you to run code before a request is completed. In a standard Next.js setup:

1. Implementation: Define your logic in a middleware.ts file.
2. Routing Control: Use a matcher in the exported config object to filter which routes the middleware runs on.
3. Global Execution: To make the middleware run for every single request, remove the matcher from the exported config.
4. Capabilities: Middleware can perform actions such as redirect, rewrite, or allow normal request behavior.

The benchmarking script performs full end-to-end performance testing against the example applications located in the ./examples directory. For each eligible application, the script executes the following workflow in parallel:

1. Build: Runs the application's build:worker script.
2. Deploy: Deploys the application to production using wrangler deploy.
3. Identify URL: Captures the production deployment URL.
4. Benchmark: Measures response times by performing multiple fetch requests against the deployment URL.

Note: Certain applications may be excluded from this process based on the exampleAppsNotToBenchmark configuration found in ./src/cloudflare.ts.

To test how your application behaves specifically on the Cloudflare runtime before deploying, use the preview script to run a local preview.

npm run preview

To start the development server for the Prisma example project, use your preferred package manager to run the dev script. Once running, you can view the application at http://localhost:3000 and edit app/page.tsx to see real-time updates.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

To start the local development environment for this Next.js project, use the standard development command. This will host the application at http://localhost:3000 and enable fast refresh (auto-updates) when you modify files like app/page.tsx.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

To deploy your OpenNext-powered Next.js application to Cloudflare, run the deploy script.

npm run deploy

To start the Next.js development server for local development, run the dev script. The application will be available at http://localhost:3000. You can modify app/page.tsx to see real-time updates.

npm run dev