Introduction
In this guide, we'll walk through creating a new Next.js 14 project using TypeScript and deploying it on Cloudflare Pages with Workers for a full-stack solution. We'll use the create-cloudflare CLI (C3) to set up our project, and deploy the application.
Step 1: Create a new Git repository
Go to GitHub, click the "+" icon in the top right, and select "New repository". Set the repository name to nextjs-cf-pages-workers or whatever you would like to, choose Public or Private visibility, and click "Create repository".
Your new repository is now ready! Clone the repository and get ready for the next step!
Step 2: Create a New Next.js Project
To get started, we'll use the create-cloudflare CLI (C3) to create a new Next.js project. Open your terminal and run the following command:
npm create cloudflare@latest my-next-app -- --framework=next
This command initializes a new Next.js project in a directory named my-next-app. Follow the prompts to configure your project. The CLI will install the necessary dependencies, including the Wrangler CLI and the @cloudflare/next-on-pages adapter.
In your terminal, this is how it should look like. After the project is created, navigate to the project directory, and run npm run dev. You should have a browser preview like this:
Step 3: Configure the Project for Cloudflare Pages
You can deploy using mutliple options, I have covered 2 in this article.
Log in to the Cloudflare dashboard and select your account. Navigate to Workers & Pages > Create application > Pages > Connect to Git. Authorize access to your GitHub account and select the new repository you created.
Make sure you have added nodejs_compat as the compatibility flags or the build will fail!
Step 4: Configure and Deploy Without C3
If you prefer not to use C3, you can manually configure and deploy your project. Install the @cloudflare/next-on-pages adapter:
npm install @cloudflare/next-on-pages
Step 5: Set Up Bindings for Local Development
Bindings allow your application to interact with Cloudflare developer products. To set up bindings for local development, modify your Next.js configuration:
// next.config.mjs
import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
if (process.env.NODE_ENV === "development") {
await setupDevPlatform();
}
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;
Ensure you have a wrangler.toml file at the root of your project with a KV binding:
# wrangler.toml
name = "my-next-app"
compatibility_flags = ["nodejs_compat"]
[[kv_namespaces]]
binding = "MY_KV"
id = "<YOUR_KV_NAMESPACE_ID>"
Alternatively, you can run the following command and it should deploy the project as shown below.
npm run deploy
Success!
By following these steps, you've successfully created and deployed a full-stack Next.js 14 project with TypeScript on Cloudflare Pages and Workers. This setup leverages Cloudflare's powerful developer products to enhance your application's capabilities.
Conclusion
Thank you for reading! If you found this blog post helpful, please consider sharing it with others who might benefit. Feel free to check out my other blog posts and visit my socials!