LogoNEXTDEVKIT Docs

Introduction

Welcome to NEXTDEVKIT - the Next.js + OpenNext code template for building production-grade SaaS applications with native multi-platform deployment.

Acknowledgments

NEXTDEVKIT stands on the shoulders of giants. This template draws inspiration from many excellent products and projects in the Next.js ecosystem:

Templates & Starter Kits: Products like Supastarter, MkSaaS, ShipFast, Makerkit, and Vercel's official templates have paved the way for modern SaaS development. Each has contributed valuable patterns and insights to the community.

Technology Stack: Built with incredible open-source technologies - Next.js, Drizzle ORM, Better Auth, Tailwind CSS, Shadcn/UI, OpenNext, SST, and many more. The innovation and dedication of these communities make projects like NEXTDEVKIT possible.

Community & Ecosystem: The Next.js, React, and broader JavaScript communities have created an amazing ecosystem of tools, libraries, and knowledge. Their documentation, tutorials, and discussions have been invaluable.

This documentation was created with significant assistance from AI tools. As a result, there may be similarities with other projects and documentation in the ecosystem.

Thank you to all the developers, maintainers, and contributors who make the modern web development ecosystem so powerful and accessible. 🙏

Let's get started! 🚀

Why I Built This Next.js Template

There are already many excellent Next.js templates out there. A quick Google search for "nextjs saas template" or "nextjs starter kit" reveals numerous options, both open-source and commercial.

So why do I still develop my own Nextjs template? On one hand, these templates more or less have some problems. Taking some open source projects as an example, such as Vercel's official SaaS template, these templates have too simple functions. Every time I start a new project, I need to manually add some features, such as sending emails, payment, connecting to my different databases to meet different needs.

So every time I started a new project before, I would look for different templates to meet my needs, but this would cost me a lot of time each time, and there was a new learning cost each time.

So I decided to design my own template to solve the following pain points of my own:

UI/UX Design Approach

The first problem is that most templates' UI/UX don't meet my requirements. Every time I need to redesign a lot of UI and solve responsive issues. So this time I plan to redesign a UI that can reuse most projects, following some design best practices.

Complexity and Functionality

The second problem is the complexity issue. Although some templates have complete functions, the code complexity is quite high, especially templates using monorepo design. Although I quite like monorepo, monorepo architecture can facilitate dependency management and layered abstraction, but for beginners, the learning cost and maintenance cost are very high.

So this time when designing the template, I tried to simplify the complexity of the code as much as possible, using the traditional Next.js project structure, and minimizing the use of third-party libraries as much as possible.

But to be honest, from the process of developing this template, I found that for a commercial paid template, balancing complexity and functionality is the most difficult point to grasp.

Adding some features is very easy, but ensuring the learning cost for template users and subsequent maintenance costs is very difficult.

So the code designed this time, my primary goal is to ensure complete functionality on the basis of template simplicity, for example:

The Deployment Challenge

The third problem is that all Next.js templates on the market have a common problem, which is the deployment challenge.

Because Next.js deployment methods are very diverse, including but not limited to Vercel, Cloudflare Workers, AWS, Railway, Fly.io, Zeabur, GCP, Azure, and self-hosted deployment, etc.

Each platform has different advantages and disadvantages. For example, Next.js's official deployment platform Vercel, although deployment is very convenient and feature support is the most comprehensive, you need to pay attention to price and cost issues. For example, enabling features like Image Optimization and ISR may cause a lot of costs. For some personal development projects, such as non-profit projects and projects with very large traffic, it may put a lot of pressure on the budget.

There is also a large category like Cloudflare Workers, which is very cheap. You can use Workers, R2, D1, KV and other resources with confidence for $5 per month, and there are also free CDN and DNS services. For independent developers, it is a very good choice.

But the disadvantages of Cloudflare are also obvious, that is, the community and official support for Next.js has been average so far, and there is a 10MB package size limit. If you want to develop from scratch a SaaS application that can be deployed to Cloudflare Workers, you will encounter many problems. When I was designing the NextDevKit Cloudflare workers template, I also solved many difficult problems, because many libraries and third-party libraries do not support the workers environment, and to ensure that the final package size is controlled at around 3MB is still quite difficult.

The template's final package size is between 3MB - 4MB. It has integrated Workers, R2, D1, KV and other resources by default. As long as it's not a large project, it should be more than enough. And the Standard version also supports D1, KV and other quotas, so you can use them with confidence. But if you subsequently need to introduce a large number of dependency libraries, the package size may exceed 10MB. In this case, it is recommended to use the standard version deployment.

Finally, there is also a category like AWS, GCP, Azure. Because some projects have compliance and privacy issues, they must choose these large cloud platforms for deployment.

Although these platforms have very comprehensive feature support, deployment is very troublesome. You need to spend a lot of time configuring and optimizing, and you need to build from infrastructure every time.

So this time I specially designed the NextDevKit AWS template, also trying to simplify deployment difficulty as much as possible, using SST to deploy. You don't need to start from Infra as Code. You just need to use SST's CLI tool to deploy to AWS very conveniently. It also supports both Serverless architecture and ECS container deployment methods. For enterprise-level development, it is a very good choice.

Finally, for support for container deployment, this template design, in addition to native support for Cloudflare Workers and AWS to reduce deployment difficulty, other platforms temporarily only support container deployment, such as Railway, Fly.io, Dokploy, Coolify, etc.

Template Features

UI and Themes

After introducing why I developed this template and my design philosophy for this template, let me introduce the features of this template and some challenges I encountered.

First is the development of the Landing Page. For starting a new project, the Landing Page is an essential step. It's the first impression for users to understand your project. So for the development of the Landing Page, I also spent a lot of time designing, including but not limited to researching high conversion rate Landing Page styles, implementing these components, maintaining style consistency, etc.

The current Landing page is designed based on a high conversion rate Landing Page style. You can visit nextdevkit demo to see the effect.

You might worry that using this template to develop different projects, having the same Landing page for each project will cause aesthetic fatigue. I also thought about this problem. Thanks to the tweakcn project supporting different theme colors and styles. You just need to copy the theme color code on this website and paste it into a file to replace it. You can visit the following websites to see the effect.

You can see that in addition to color changes, some small component styles will also change, such as button, input, card styles, as well as padding, margin, border-radius, etc. No matter which style you like, these components can maintain relative consistency and beauty.

It also includes but is not limited to login and registration pages, settings pages, Dashboard pages. I try to keep the UI style of each page as consistent as possible, and there will be no very abrupt component styles. Later you just need to let AI IDE imitate the style of these components for development, which can greatly reduce the anxiety and frustration of developing UI styles from scratch.

Of course, dark mode and mobile support are also unconditionally supported. And like the Blog page, I specially designed it to align with Notion's style, trying to keep it simple and modern, not crude or complicated. Even the 404 page I specially designed. Of course, you can also completely modify these default styles in the template. You can visit nextdevkit demo 404 to see the effect.

Technology Stack

For a template, the biggest role is to speed up development, so for technology selection, I also try to choose the most popular and best tech stack.

Previously I had a blog introducing Indie Developer Tech Stack 2024, which received widespread attention and reviews from everyone. This time's selection, in addition to referring to that blog at the time, I also made some adjustments based on AI friendliness.

After all, for 2025 development now, developer-friendly tech stacks are secondary. AI-friendly tech stacks are king. As long as this tech stack's ecosystem can be learned by AI, developers can get twice the result with half the effort. Below is a detailed introduction to the technology stack selection.

  • The framework uses Next.js latest version, supporting React 19 features. For full-stack development, currently no framework can be written by AI faster and more accurately than Next.js.
  • Uses Tailwind CSS 4 version. Tailwind CSS is an AI-friendly code style. After AI IDE appeared, other CSS frameworks gradually died out.
  • Uses Shadcn UI components. Shadcn UI currently has a wide ecosystem and very rich components. The reason for selection is still AI First. And later I will share in the community where to find beautiful components, Shadcn components for rapid development.
  • Database ORM uses Drizzle ORM. Currently the range that can be selected only has Drizzle ORM and Prisma ORM. Actually I personally think Prisma's development experience and code design are quite good, but can't stand that Drizzle has good performance and complete ecosystem. Because the template needs to be deployed to Serverless platforms, you need to choose an ORM facing Edge environment. Drizzle is the best choice.
  • Auth chooses Better Auth. The reason for not choosing NextAuth(Auth.js) is because the documentation is not good, and it has been changing for the past few years. Instead, after using Better Auth, I found that the development experience and code design are very good, and the ecosystem is very complete. For Auth this kind of security framework, never reinvent the wheel. Choose an ecosystem that is complete, has comprehensive documentation, and has community support is the best choice.
  • For Blog and Docs I chose FumaDocs + FumaDocs MDX to develop. FumaDocs is a very good documentation framework I discovered this year. Originally I always used Content Collection to develop, but later I found that FumaDocs's code design and community activity are very good. Especially FumaDocs's author is very active on Github, and is also very attentive to documentation development and maintenance.
  • Email service uses Resend, payment service uses Stripe / Creem. Both Resend and Stripe are currently the most popular services, with very complete ecosystems, and very friendly to developers. Later I will also support other third parties, especially for payment. Later I will prioritize support for some payment services that support domestic developers.
  • Storage object storage prioritizes support for AWS S3 and Cloudflare R2. Actually these two use the same protocol. In theory, all those using S3 protocol are supported.
  • i18n internationalization uses next-intl. Actually after adding i18n functionality, the code complexity of the entire project increased by one level, because you need to support multiple languages, so some variable extraction and jumping need to be handled separately. But i18n is necessary for many people, so I added it in the end.
  • AI functionality uses Vercel AI SDK and AI Elements. The support for AI functionality is still very comprehensive.

In addition to the above tech stack, there are some special optimizations, such as optimizations for Cookie and Analytics. Analytics currently supports Google Analytics, Umami, Plausible, etc. More will be supported later. And I specifically optimized for privacy collection regulations like GDPR in the template. If users do not agree to collect data, no data will be collected.

In addition, for SEO, I also made special optimizations, including but not limited to sitemap generation, robots.txt generation, og:image generation, metadata generation for different pages, blog keywords optimization, etc.

Final Thoughts

If you have similar pain points as me, or want to develop SaaS services through Next.js, or to build a full-stack project, then this template can help you save one or two months of time. I personally spent a lot of time on code optimization and configuration, and can complete project initialization through simple configuration. And through subsequent assistance from AI and Cursor, it can greatly accelerate the speed from your idea to project landing.