The Ultimate Opennext & Next.js Template | NEXTDEVKIT Blog - NEXTDEVKIT

Over the past two months, I've been working on creating a Next.js template that I'm truly satisfied with. Today, this template is very close to what I wanted, and it supports deployment to all major cloud platforms including Vercel, Cloudflare Workers, AWS, Railway, Fly.io, GCP, Azure, and more. So it's time to introduce NextDevKit to everyone!

There are actually many excellent Next.js templates available now. If you search for nextjs saas template or nextjs starter kit on Google, you'll find many great templates, both open source and commercial paid ones.

Why I Built Another Next.js Template?

So why did I decide to build my own Next.js template? There are several reasons. First, most existing templates have some limitations. Take Vercel's official SaaS templates as an example - these templates are often too simple in functionality. Every time I start a new project, I need to manually add features like email sending, payment processing, and database connections for different needs.

So previously, every time I started a new project, I had to find different templates to meet my needs. But this took a lot of time every time, with new learning costs each time.

UI Design Issues

Most templates have several issues that I've always been concerned about. The first issue is that the template's demo styling is too basic. While the backend functionality is complete, the frontend styling is too simple. which means I need to redesign the landing page every time.

So this time, in designing the template's UI, I spent a lot of time polishing everything from the landing page to the blog to the dashboard. You can visit nextdevkit demo and nextdevkit workers demo and nextdevkit aws demo to see the results.

Complexity vs Functionality Balance

The second issue is complexity. While templates like supastarter have complete functionality, the code complexity is quite high. To support different platforms and features (like email support for Resend, Plunk, Mailgun, etc.), this template uses a monorepo architecture with many third-party libraries. While monorepo architecture makes dependency management easier, both learning and maintenance costs are high.

So when designing my template, I tried to simplify code complexity as much as possible, using traditional Next.js project structure and minimizing third-party library usage.

To be honest, during the development process, I found that for a commercial paid template, balancing complexity and functionality is the hardest thing to manage. Adding features is easy, but keeping learning costs and user maintenance costs manageable while ensuring code readability and maintainability is very difficult.

Nobody wants to buy a template with very simple functionality and basic styling, as it means spending a lot of time reinventing the wheel and writing code. But I think nobody wants to buy a bloated template either, as it means high learning and maintenance costs. Every time you use it, you might need to remove unnecessary features and code, and spend a lot of time understanding unused code.

So in designing this code, my primary goal was to ensure complete functionality, such as:

For other features like AI, richer components, and more customized functionality, while they will be supported in future versions, I'll consider supporting them through other methods like Cursor, MCP, etc. This approach is more flexible and won't add unlimited features to the codebase.

Deployment Challenges

The third issue is that all Next.js templates on the market share a common problem: deployment challenges.

Next.js has many deployment options, including Vercel, Cloudflare Workers, AWS, Railway, Fly.io, GCP, Azure, and more.

Each platform has different advantages and disadvantages. For example, Vercel, Next.js's official deployment platform, is very convenient to deploy and has the most comprehensive feature support. However, pricing needs extra attention, especially for features like Image Optimization and ISR. For some personal development projects, especially non-profit projects with high traffic, you might find yourself in a balance between pricing and passion projects.

Then there's platforms like Cloudflare Workers, which are very affordable. For $5 per month, you can confidently use Workers, R2, D1, KV, and other resources, plus free CDN and DNS services. This is an excellent choice for individual developers.

But Cloudflare's disadvantages are also obvious - community and official support for Next.js has been mediocre so far. If you want to develop from scratch, you'll encounter many issues with limited solutions. When designing the NextDevKit Cloudflare workers template, I encountered many problems. Due to lack of support for many libraries and third-party services, and to maintain consistent functionality across all templates, I had to refactor a lot of code and replace some libraries.

Especially the official Cloudflare Pages project, which only supports Edge environment, makes it almost impossible to support all the features of this Next.js template. Fortunately, there's the Opennext project. Although it has some minor issues, it ultimately supported all the features.

Finally, there are cloud platforms like AWS, GCP, and Azure. Due to compliance and privacy requirements for some projects, these major cloud platforms must be chosen for deployment.

While these platforms have very comprehensive feature support, deployment is very complicated, requiring a lot of time for configuration and optimization. Every time you need to start building from infrastructure.

So I specifically designed the NextDevKit AWS template to simplify deployment difficulty as much as possible, using SST for deployment. You don't need to start from Infrastructure as Code - you can just use SST's CLI tool to deploy to AWS very conveniently. It also supports both Serverless architecture and ECS container deployment methods, making it an excellent choice for enterprise-level development.

Finally, there's container deployment support. Besides native support for Cloudflare Workers and AWS to reduce deployment difficulty, other platforms currently only support container deployment, like Railway, Fly.io, Dokploy, etc.

The deployment needs mentioned above are my daily development challenges. Some of my previous projects were non-profit with high traffic, and deploying on Vercel always made me worry about bills, so platforms like Cloudflare Workers are perfect for me. Some projects are enterprise-level, directly managed on clients' AWS, and every time I build a Next.js AI demo project, I have to start from infrastructure, considering security and functionality, which is very troublesome.

So I specifically designed three different templates and deployment methods to meet different needs. Both Cloudflare Workers and AWS have native platform support.

Template Features

UI and Theming

After explaining why I built this template and my design philosophy, let me introduce the template's features and some challenges I encountered.

First is the Landing Page development. For launching a new project, a landing page is essential - it's the first impression users get of your project. So I spent a lot of time designing the landing page, including researching high-conversion landing page styles, implementing these components, and maintaining style consistency.

The image below shows a high-conversion landing page style I researched, so I referenced these styles this time. You can visit nextdevkit demo to see the results.

You might worry about using this template for different projects - wouldn't having the same landing page for each project cause aesthetic fatigue? I've thought about this issue. I support different theme colors and styles through tweakcn. You just need to copy the theme color code from this website and paste it into a file to make the switch. You can visit the following websites to see the effects:

As you can see, besides color changes, some small component styles also change, such as button, input, card styles, and padding, margin, border-radius, etc. Whatever style you prefer, these components maintain relative consistency and attractiveness.

This includes login/registration pages, settings pages, dashboard pages - I try to keep all page UI styles consistent to avoid jarring component styling. Later, you just need to have AI IDE mimic these component styles for development, which can greatly reduce anxiety and frustration from developing UI styles from scratch. I'll also consider writing UI design principles into Cursor Rules to let AI automatically maintain style consistency.

Of course, dark mode and mobile support are unconditionally supported. For blog pages, I specifically designed them to align with Notion's styling, keeping them simple and modern without being basic or complex. I even specially designed the 404 page - you can imagine how much time I put into this template. You can visit nextdevkit demo 404 to see the effect.

I think the time spent on these UI/UX components was worth it. Besides speeding up your development and reducing UI anxiety, I'll also use this template for other project development myself.

Technology Stack

For a template, the biggest value is speeding up development, so I chose the most popular and user-friendly tech stack for technology selection.

I previously wrote a blog about Indie Hacker Tech Stack, which received wide attention and feedback. This time, besides referencing that blog, I made some adjustments based on AI-friendliness.

After all, for 2025 development, developer-friendly tech stacks are secondary - AI-friendly tech stacks are king. As long as the tech stack ecosystem can be learned by AI, developers can achieve twice the result with half the effort. Here's a detailed introduction to the selected tech stack:

Framework uses the latest version of Next.js, supporting React 19 features. For full-stack development, currently no framework allows AI to write Next.js faster and more accurately.
Uses Tailwind CSS version 4. Tailwind CSS is an AI-friendly code style. After AI IDEs appeared, other CSS frameworks gradually disappeared.
Uses Shadcn UI components. Shadcn UI currently has a broad ecosystem and very rich components. The selection reason is still AI First. I'll also share where to find beautiful components in the community later for rapid Shadcn component development.
Database ORM uses Drizzle ORM. Currently, the options are only Drizzle ORM and Prisma ORM. Personally, I think Prisma's development experience and code design are quite good, but Drizzle has better performance and a complete ecosystem. Since templates need deployment to Serverless platforms, choosing an Edge environment-oriented ORM is necessary, and Drizzle is the best choice.
Auth chose Better Auth. I didn't choose NextAuth (Auth.js) because of poor documentation and constant changes over the past few years. After using Better Auth, I found the development experience and code design are very good, with a very complete ecosystem. For security frameworks like Auth, never reinvent the wheel - choosing a framework with complete ecosystem, comprehensive documentation, and community support is the best choice.
For Blog and Docs, I chose FumaDocs + FumaDocs MDX for development. FumaDocs is an excellent documentation framework I discovered this year. I used to use Content Collection for development, but later found that FumaDocs has good code design and community activity. Especially the FumaDocs author is very active on Github and very dedicated to documentation development and maintenance. If you need to maintain documentation or blogs, try FumaDocs (I can't help sharing good projects).
Email service uses Resend, payment service uses Stripe. Both services are currently the most popular services with very complete ecosystems and are very developer-friendly. I'll also support other third-parties later, especially for payments, prioritizing payment services that support developers globally.
Storage object storage prioritizes AWS S3 and Cloudflare R2. Actually, these two use the same protocol, so theoretically any service using S3 protocol is supported.
i18n internationalization uses next-intl. Actually, adding i18n functionality increased the project's code complexity by one level, because supporting multiple languages requires separate handling of some variable extraction and routing. But i18n is necessary for many people, so I finally added it.

Besides the above tech stack, there are some special optimizations, such as Cookie and Analytics optimization. Analytics currently supports Google Analytics, Umami, Plausible, etc., with more support coming later. I specifically optimized for GDPR and other privacy collection regulations in the template - if users don't agree to data collection, no data will be collected.

Actually, most templates on the market don't pay attention to GDPR and other privacy collection requirements. Doing these details well can make your project more compliant with regulations and easier to gain user trust.

Additionally, for SEO, I made special optimizations, including sitemap generation, robots.txt generation, og:image generation, different page metadata generation, blog keyword optimization, etc. Finally achieved a 100 score through Google SpeedTest.

If you still have questions about template features, you can visit NextDevKit Official Documentation to see detailed documentation and feature introductions.

Currently, the documentation only supports English, but will support multiple languages after stabilization.

Cloudflare Workers Template

Besides the template features above, this development's focus is solving deployment challenges for most people. Personally, I commonly use four platforms.

The first is of course Vercel. I deploy many demos or small personal projects there. After all, Vercel's support for Next.js is excellent. If you don't consider price and team resource management, Vercel is the best choice. I also have some small commercial projects deployed on Vercel. I don't put large projects there because Vercel's pricing changes quite frequently, and there are some unexpected charging points. The classic example is Image Optimization - if your project has high traffic and lots of image rendering, not turning off Image Optimization can result in thousands of dollars in monthly bills.

Cloudflare is a great choice because of its free CDN and anti-DDOS attack capabilities, which have always been popular with individual developers. So after Cloudflare Pages launched official @cloudflare/next-on-pages framework support for Next.js, I've been exploring how to use Cloudflare to deploy Next.js projects supporting all common features.

But after trying to use Cloudflare Pages to deploy a production Next.js project last year, I actually gave up on this framework. Not to mention that almost every step was problematic with no framework documentation available, requiring reading source code, and insufficient official community response and support. Most importantly, the official @cloudflare/next-on-pages framework is based on pure Edge runtime, which doesn't support libraries requiring Node.js well. Many libraries can't be used, many Next.js best practices have to be changed accordingly, and it seems impossible to support some new Next.js features in the future.

Fortunately, I discovered the Opennext project early this year. This project is based on Cloudflare Workers, supporting Node.js APIs through Cloudflare Workers runtime, supporting almost all Next.js features. This framework is also officially supported later, so I decided to use this framework to develop the Cloudflare Workers template.

You can purchase the NextDevKit Cloudflare Workers template to get access to both code repositories, including Next.js and NextDevKit Cloudflare Workers Next.js templates, plus future updates and community support.

The reason for separating into a separate code repository is that besides integrating Opennext, the Cloudflare Workers template also integrates Cloudflare D1, KV, Durable Objects and other resources. The database defaults to D1, cache defaults to KV, and KV is used to support ISR, etc. During the build period, cache is automatically generated and put into KV. These resources are all supported by Worker Standard Plan resources, and Cloudflare's resource pricing is very cheap. My goal is to let users make perfect use of these resources.

You can see all Worker bindings through the Cloudflare Dashboard image below.

Currently, I haven't used KV extensively as system internal data cache, such as user data, because I need to keep three code repositories synchronized. I might do deeper optimization when I have time later.

Of course, you can modify the code to integrate other databases and cache libraries. I'll also share development experience using Opennext and Cloudflare Workers in the community later.

It's important to note that because Cloudflare Worker's free version limits code packaging to 3MB, if you want to use the Workers version template, you must purchase Cloudflare Workers' $5/month Standard version to increase the limit to 10MB. Currently, after integrating all features, the template's packaged size is about 3MB - 3.5MB. For the Standard version, unless it's a very large project, it should be more than sufficient. The Standard version also supports D1, KV quotas, so you can use them confidently.

AWS Template

For enterprise-level project development, the NextDevKit AWS template supports managing AWS infrastructure resources through SST and supports both Serverless and ECS container deployment methods.

If you apply for a company to start your entrepreneurial journey, such as applying for a Stripe Atlas company, you can directly apply for $5,000 in cloud service credits. If you apply for AWS startup support directly, you can apply for up to $100,000 in cloud service credits, which can cover your cloud service costs for a year. And AWS's cloud services are the most comprehensive - whatever you need, AWS can satisfy.

Some projects require hosting on major company clouds like AWS due to privacy and regional compliance requirements, so this template natively supports AWS, fully utilizing AWS resources like RDS, S3, Lambda, CloudFront, CloudWatch, etc. The database uses RDS and Proxy, external database access requires EC2 SSH connection and IP whitelist, providing better security and privacy protection.

Additionally, through the SST project, you don't need to build your own Infrastructure as Code from scratch. SST is based on the Pulumi framework - one command handles everything from creating resources to deployment, updates, and deletion, completely automated. SST's community is very active with lots of resources and tutorials available.

Actually, when selecting technology, I considered whether to use AWS's official Amplify framework to deploy Next.js projects. But after spending a lot of time researching Amplify's documentation and community and personally deploying a production project, I found Amplify is almost unusable in production environments. I'll share some AWS knowledge separately when I have time.

About AI Features

Currently, NextDevKit's AI features are in the form of frontend AI components in the code, temporarily without integrating Vercel AI SDK and LLM APIs. This is because everyone needs different AI features. If everything were integrated, it would be somewhat bloated. I haven't found a good way to integrate these features yet, so they're temporarily in the form of frontend components in the code.

I'll spend time later researching whether AI features can be integrated through Prompt, RAG, or MCP methods. Of course, there won't be additional charges later. It might be supported in non-code ways. So what you get after purchase isn't just code, but also future service support, and development ideas and methods will be shared in the Discord community.

Final Words

If you have similar pain points, or want to develop SaaS services through Next.js, or build a full-stack project, this template can definitely save you one to two months of time. I personally spent a lot of time on code optimization and configuration, so you can complete project initialization through simple configuration. With AI and Cursor's subsequent assistance, it will definitely greatly speed up your journey from idea to project landing.

You can currently purchase through NextDevKit official website via Stripe. The current pricing is based on research of similar products. You can also contact me for detailed consultation and purchase.

Since this template is currently in the just-completed development stage, there are still some imperfections in code and documentation. To support early seed users, I'm offering an early bird discount. You can get a 20% discount with HAPPYCODING in the Stripe purchase page, and get lifetime free updates plus community support and future services.