Unverceled Next.js is a starter template for Next.js projects optimized for Cloudflare Workers deployment using OpenNext. It provides a preconfigured setup with essential development tools and workflows.
The template includes testing, linting, type safety, and deployment configurations out of the box. You can skip repetitive setup tasks and focus on building features.
This starter works well for projects needing serverless deployment on Cloudflare’s edge network. It supports both static and dynamic Next.js applications with built-in optimizations.
Features
🔄 Changesets: Manages versioning and changelogs.
✍️ Commitlint & Commitizen: Enforces conventional commit messages.
🎭 Playwright: Supports End-to-End testing.
💅 Code Quality Tools: Includes Prettier, ESLint, Cspell, and MarkdownLint.
🔒 TypeScript: Features Total TypeScript TS Reset and a strict configuration.
🛡️ Type Safety: Integrates Arktype and T3 Env for environment variables.
🚀 GitHub Actions: Pre-configured for CI/CD workflows.
훅 Lefthook: Manages Git hooks for pre-commit and commit-msg checks.
🧪 Vitest: Enables Unit and Browser Component testing.
🎨 UI & Styling: Comes with Tailwind CSS v4 and Shadcn UI.
☁️ Cloudflare Deployment: Utilizes OpenNext for deployment to Cloudflare Workers.
Use Cases
- Rapid Prototyping on Cloudflare: Quickly initialize a Next.js 15 project with full tooling, ready for deployment to Cloudflare Workers. This speeds up the initial phase of new serverless web applications.
- Standardized Development Environments: Establish a consistent, high-quality development setup for teams building Next.js applications on Cloudflare. The pre-configured tools ensure code quality and adherence to best practices.
- Full-Stack Edge Applications: Build robust Next.js applications that benefit from Cloudflare’s edge computing capabilities. Utilize KV namespaces and D1 databases with a structured project template.
- Migrating to Cloudflare Workers: Provides a clear path and a well-equipped starting point for developers looking to move existing Next.js projects to Cloudflare Workers.
- Learning Modern Next.js Tooling: Explore a comprehensive setup of current development tools integrated within a Next.js 15 project. This is useful for developers wanting to understand a production-ready configuration.
Installation
1. Use the Unverceled Next.js template to create a new repository on GitHub.
2. Clone your newly created repository to your local machine:
git clone <your-repository-url>
3. Navigate into the project directory and install dependencies using pnpm:
cd <your-project-name>
pnpm install
4. Open the wrangler.toml file. Update it with your Cloudflare KV namespace ID, and your D1 Database name and ID.
5. To deploy your application to Cloudflare, first log in to Wrangler:
pnpm wrangler login
6. Then, deploy the application:
pnpm run deploy
Usage
After installation, your basic “Hello World” page is ready for customization and deployment. The core of using this template involves developing your Next.js application as usual, benefiting from the integrated tooling.
Modify the wrangler.toml file to configure your Cloudflare resources, such as KV namespaces and D1 databases, specific to your project. The template provides the necessary structure for these configurations.
For extending the basic setup or for more advanced Cloudflare configurations with OpenNext, consult the official OpenNext Cloudflare documentation. You can also configure Cloudflare Workers Builds for automatic deployment on new commits to your main branch. For image optimization, consider using Cloudflare Images as a custom loader.
Related Resources
- Wrangler CLI: The command-line tool for building and managing Cloudflare Workers applications. Wrangler CLI Documentation
- OpenNext: The library that allows Next.js applications to run on various serverless platforms, including Cloudflare Workers. OpenNext Documentation
- Next.js: The React framework used by this starter-kit. Next.js Documentation
- Cloudflare Workers: The serverless execution environment where the Next.js application will be deployed. Cloudflare Workers Documentation
FAQs
Q: Who is this template for?
A: This template is for web developers who want to build Next.js applications on Cloudflare’s infrastructure and require a comprehensive set of development tools from the start.
Q: What makes this starter-kit different from a standard Next.js setup?
A: It specifically targets Cloudflare Workers deployment via OpenNext and bundles a wide array of development tools like Changesets, Playwright, Vitest, and strict TypeScript settings, which are not part of a default Next.js installation.
Q: Do I need a Cloudflare account to use this template for deployment?
A: Yes, to deploy the application to Cloudflare Workers and use services like KV or D1, you need a Cloudflare account.
Q: Can I customize the included tooling?
A: Yes, all included tools are configurable. You can modify their settings or remove/add tools according to your project’s requirements.
Q: Do I need a Cloudflare Workers paid plan to use this template?
A: You can start with the free tier of Cloudflare Workers, but depending on your application’s traffic and resource needs, you might need to upgrade to a paid plan.
