36 Next.js Templates and Starters For Full-stack Development and SaaS Apps

36 Next.js Templates and Starters For Full-stack Development and SaaS Apps
Photo by Juanjo Jaramillo / Unsplash

Next.js is a popular React framework that simplifies the process of building server-side rendered React applications. It provides a standardized structure for building React applications, along with features such as automatic code splitting, server-side rendering, and static site generation.

These features make it ideal for building high-performance web applications. Additionally, Next.js supports static site generation and can be used to build desktop applications using Electron or Tuari.

Next.js starter templates are pre-built project templates that can be used as a starting point for building a new application. They provide pre-configured tools and features that can save developers time and effort when setting up a new project. These templates can be customized to fit specific project needs and speed up development time.

Benefits of Next.js Starter Templates

  • Save Time: Next.js starter templates provide a pre-built foundation for building a new application, saving developers time and effort.
  • Clean Code: These templates provide a standard structure and best practices for building React applications, resulting in cleaner and more maintainable code.
  • Speed Production: With pre-built components and features, developers can get up and running quickly, reducing development time and speeding up time to market.
  • Highly Customizable: Next.js starter templates can be easily customized to fit the specific needs of a project, allowing developers to focus on building features instead of setting up the project.
  • Open-source: These templates are open-source, which means that they can be used and modified by anyone for free.
  • Many Features: Next.js starter templates come with many useful features out of the box, such as authentication, routing, and API integration.
  • Many Options: There are many different Next.js starter templates available, each with its own set of features and tools, giving developers many options to choose from.

If you're looking to build a new React application with Next.js, using a starter template can be a great way to save time, improve code quality, and speed up development time.

Here we offer you a list of the best Next.js open-source starters that you can use as a base for your next project.

1- Non-opinionated TypeScript starter for Next.js

Non-opinionated TypeScript starter for Next.js, It is highly scalable foundation with the best DX. All the tools you need to build your next project.

NextJS Starter Boilerplate to Speed up your work
Next.js is an amazing React framework for building web apps, desktop apps (with Electron and Tauri) and mobile apps with Ionic. Yet, it comes as a bare-bones framework which you should add and customize your packages on it. That process takes time. So, here we tend to find the
GitHub - jpedroschmitz/typescript-nextjs-starter: Non-opinionated TypeScript starter for Next.js. All the tools you need to build your next project ⚡️
Non-opinionated TypeScript starter for Next.js. All the tools you need to build your next project ⚡️ - GitHub - jpedroschmitz/typescript-nextjs-starter: Non-opinionated TypeScript starter for Next.…

2- Tailnext

Tailnext is a free and open-source template to make your website using NextJS + Tailwind CSS. Ready to start a new project and designed taking into account best practices.

Tailnext Features:

  • ✅ Integration with Tailwind CSS supporting Dark mode.
  • Production-ready scores in Lighthouse and PageSpeed Insights reports.
  • Image optimization and Font optimization.
  • ✅ Fast and SEO friendly blog.
  • ✅ Generation of project sitemap and robots.txt based on your routes.
GitHub - onwidget/tailnext: ⭕️ TailNext: Free template using Next.js 13 and Tailwind CSS with the new app directory.
⭕️ TailNext: Free template using Next.js 13 and Tailwind CSS with the new app directory. - GitHub - onwidget/tailnext: ⭕️ TailNext: Free template using Next.js 13 and Tailwind CSS with the new app…

3- DashUI Next.js Free Admin Template

Dashui free Next.js admin dashboard template, built with latest react. Build your next project with DashUI React.

GitHub - codescandy/dashui-free-nextjs-admin-template: Dashui free nextjs admin dashboard template, built with latest react. Build your next project with DashUI React.
Dashui free nextjs admin dashboard template, built with latest react. Build your next project with DashUI React. - GitHub - codescandy/dashui-free-nextjs-admin-template: Dashui free nextjs admin d…

4- Tremor

Tremor is a free and open-source library designed to help developers build data-rich dashboards with ease. It allows for the creation of simple and modular components for customized dashboards. Created by data scientists and software engineers, Tremor is reliable, effective, and easy to use, making it an excellent choice for developers of all levels.

Tremor is a Complete Dashboard Components Library for React and Next.js
Tremor is a free, open-source library that aids developers in building data-rich dashboards. With Tremor, you can create simple and modular components to build insightful dashboards with ease. The library is fully open-source and was made by data scientists and software engineers with a sweet spot f…

FullStack Stater Templates

5- Precedent

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project. It uses Auth.js, Prisma, Tailwind CSS, Lucide Icons, and several developer-friendly hooks.

Precedent Is a Next.js Starter For Serious Developers
Precedent is a free and open-source collection of opinionated components, hooks, and utilities for your Next.js project. It enables Next.js developers to boost their production time by allowing them to create reactive apps quickly. Basically, Precedent is a collection of components, hooks, and util…
GitHub - steven-tey/precedent: An opinionated collection of components, hooks, and utilities for your Next.js project.
An opinionated collection of components, hooks, and utilities for your Next.js project. - GitHub - steven-tey/precedent: An opinionated collection of components, hooks, and utilities for your Next.…

6- Next.js + MongoDB

A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind.

Build a Next.js React Apps with MongoDB in Mins
What is Next.js? Next.js is a free open-source React framework for building a web applications. It allows developers to generate start website or use server-side rendering to create a highly scalable sites. What is MongoDB? MongoDB is a NoSQL document database, that is fast, and works without ha…
GitHub - hoangvvo/nextjs-mongodb-app: A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind.
A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind. - GitHub - hoangvvo/nextjs-mongodb-app: A Next.js and MongoDB web application, des…

7- Nextjs + MongoDB Blog APP

This project offers a regular updated code for building Next.js with MongoDB Atlas.

GitHub - Sooraj-s-98/Blog_App_Nextjs_MongoDB: Nextjs + MongoDB Blog APP
Nextjs + MongoDB Blog APP. Contribute to Sooraj-s-98/Blog_App_Nextjs_MongoDB development by creating an account on GitHub.

8- (Next.js❤️MongoDB)➕Passport.js

This starter supports MongoDB, and Passport.js. It also includes Authentication sessions, profile, and many other options.

GitHub - tsaxena4k/Next.js-Mongodb-Authentication-App: An operating , self-reliable Authentication app build using Next.js, mongoDb and Passport.js
An operating , self-reliable Authentication app build using Next.js, mongoDb and Passport.js - GitHub - tsaxena4k/Next.js-Mongodb-Authentication-App: An operating , self-reliable Authentication app…

9- Next.js with TypeScript, MongoDB, HttpReact, TailwindCSS and DaisyUI

A Next.js app with a serverless backend using MongoDB. A template that can be used to quickly bootstrap new (app) Next.js project. It also has Tailwind configured with PostCSS and DaisyUI.

GitHub - danybeltran/nextjs-typescript-and-mongodb: A Next.js (13) template
A Next.js (13) template. Contribute to danybeltran/nextjs-typescript-and-mongodb development by creating an account on GitHub.

10- Next.js ❤️ MongoDB

An Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind. It is an ideal solution for building social apps.

Included features are:

  • Session-based authentication
  • Sign up/Sign in/Sign out API
  • Authentication via email/password
  • Email verification
  • Password change
  • Password reset via email
  • Profile picture, name, bio, email
  • Update user profile
  • View others' profiles and posts
  • Public postings like Twitter and Facebook
GitHub - xreider/nextjs-mongodb-app
Contribute to xreider/nextjs-mongodb-app development by creating an account on GitHub.
Create Next.js MongoDB Powered App in 10 minutes with This Open-source Boilerplate
Next.js is an opens-source React framework for building scalable web applications. It supports static website generation, and server-side rendering. Next.js comes with full TypeScript support, fast bundling, client routing, pre-fetching, and it does not require extensive configuration like its comp…

11- Next.js Prisma PostgreSQL Auth Starter

This is a Next.js starter kit that uses Next-Auth for simple email + password login
Prisma as the ORM, and a Vercel Postgres database to persist the data.

GitHub - vercel/nextjs-postgres-auth-starter: Next.js + Tailwind + Typescript + Prisma + NextAuth + PostgreSQL starter template.
Next.js + Tailwind + Typescript + Prisma + NextAuth + PostgreSQL starter template. - GitHub - vercel/nextjs-postgres-auth-starter: Next.js + Tailwind + Typescript + Prisma + NextAuth + PostgreSQL s…

12- Nextjs Full Stack Starter

A starter for Next.js full-stack projects with all you need to start your side project or your dream. Do your thing.

This project features include:

  • 📡 API using tRPC
  • 📦 Database with Prisma & Postgres
  • 👾 Very lenient Typescript configuration (this is by design)
  • 🔒 Auth with NextAuth: Credentials setup for Email and Password, Forgot Password email and template
  • ☀️ TailwindCSS
  • 🐻 Zustand for any extra state management needs
  • 📰 Blog example: Create post, Show all posts, Protected routes
  • Protected API routes
  • 🎨 ESLint + Prettier + Lint Staged
  • 💚 CI setup using GitHub Actions: Build, Linting
GitHub - SaraVieira/next-fullstack-starter: A nextjs full stack starter for your dreams
A nextjs full stack starter for your dreams. Contribute to SaraVieira/next-fullstack-starter development by creating an account on GitHub.

13- Full-Stack Next.js Application Template

Yet another Full-stack Starter for Next.js. It helps you to create a simple whole-website architecture, and provides the foundational services, components, and plumbing needed to get a basic web application up and running.

GitHub - xizon/fullstack-nextjs-app-template: A full-stack sample web application based on Next.js that creates a simple whole-website architecture
A full-stack sample web application based on Next.js that creates a simple whole-website architecture - GitHub - xizon/fullstack-nextjs-app-template: A full-stack sample web application based on Ne…

14- Full-stack Next.js 13 application

Full-stack Next.js 13 application. Uses React 18 client & server components, TypeScript, Prisma ORM, Railway PostgreSQL database, NextAuth.js OAuth 2.0 authentication, OpenAI API GPT-3.5-Turbo, and Stripe payments.

GitHub - yaseenmustapha/nextjs13-app: Full-stack Next.js 13 application. Uses React 18 client & server components, TypeScript, Prisma ORM, Railway PostgreSQL database, NextAuth.js OAuth 2.0 authentication, OpenAI API GPT-3.5-Turbo, and Stripe payments.
Full-stack Next.js 13 application. Uses React 18 client & server components, TypeScript, Prisma ORM, Railway PostgreSQL database, NextAuth.js OAuth 2.0 authentication, OpenAI API GPT-3.5-Turbo,…

15- Fullstack Next.js E-commerce

Fullstack Next.js E-Commerce made with NextAuth + Prisma, Docker + TypeScript + React Query + Stripe + Tailwind Sentry and much more 🛒

GitHub - olafsulich/fullstack-nextjs-ecommerce: Fullstack Next.js E-Commerce made with NextAuth + Prisma, Docker + TypeScript + React Query + Stripe + Tailwind Sentry and much more 🛒
Fullstack Next.js E-Commerce made with NextAuth + Prisma, Docker + TypeScript + React Query + Stripe + Tailwind Sentry and much more 🛒 - GitHub - olafsulich/fullstack-nextjs-ecommerce: Fullstack Ne…

16- Full stack project in Next.js + Prisma + Postgresql

Social media site starter using Next.js with Typescript, TailwindCSS, Prisma (PostgreSQL).

GitHub - glRajkumar/fullstack-nextjs: Social media site using NextJs with Typescript, TailwindCSS, Prisma (postgresql)
Social media site using NextJs with Typescript, TailwindCSS, Prisma (postgresql) - GitHub - glRajkumar/fullstack-nextjs: Social media site using NextJs with Typescript, TailwindCSS, Prisma (postgre…


17- Next.js Express Full Stack Boilerplate

GitHub - the-boilerplates/nextjs-express-full-stack: Next.js Express TypeScript
Next.js Express TypeScript. Contribute to the-boilerplates/nextjs-express-full-stack development by creating an account on GitHub.

18- Blitz is a FullStack Starter

Blitz picks up where Next.js leaves off, providing battle-tested libraries and conventions for shipping and scaling worldwide applications.

Blitz Adds Full-stack Engine To Next.js
Next.js is a popular React-based framework for building scalable web apps. It can also be used to build desktop apps using Tauri or Nextron, or mobile apps using Iconic. Although it comes bare-bones, it has a vast ecosystem and strong community support. Blitz is a free and open-source toolkit
GitHub - blitz-js/blitz: ⚡️ The Missing Fullstack Toolkit for Next.js
⚡️ The Missing Fullstack Toolkit for Next.js. Contribute to blitz-js/blitz development by creating an account on GitHub.


19- create-t3-app  

T3 App offers a fully interactive CLI to start a full-stack, typesafe Next.js app. The "T3 Stack" is a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety.

GitHub - t3-oss/create-t3-app: The best way to start a full-stack, typesafe Next.js app
The best way to start a full-stack, typesafe Next.js app - GitHub - t3-oss/create-t3-app: The best way to start a full-stack, typesafe Next.js app
Create T3 App
The best way to start a full-stack, typesafe Next.js app.

20- Full Stack Movie Application with NEXT.JS 13!

Full Stack Movie Application with NEXT.JS 13!(Next.js 13, mongodb, node js, NextAuth.js v4, Tailwind CSS, framer-motion, TMDB Api, Google Authentication, primary information about a movies, Users can Add Bookmark in favorite actors and movies).

GitHub - SashenJayathilaka/Full-Stack-Movie-Application: Full Stack Movie Application with NEXT.JS 13!(Next.js 13, mongodb, node js, NextAuth.js v4, Tailwind CSS, framer-motion, TMDB Api, Google Authentication, primary information about a movies, Users can Add Bookmark in favorite actors and movies)
Full Stack Movie Application with NEXT.JS 13!(Next.js 13, mongodb, node js, NextAuth.js v4, Tailwind CSS, framer-motion, TMDB Api, Google Authentication, primary information about a movies, Users c…


21- Nextin

Nextein is a free open-source library wrapper around Next.js that allows you to write static sites using Markdown and React.

Nextein: Yet Another Markdown Blog and CMS Next.js Generator
A static site generator with markdown + react for Next.js


22- Nextra

Nextra is an ideal solution for building websites and documentation website.

Nextra: Generate Rich Documentation Sites with Next.js and MDX
Simple, powerful and flexible site generation framework with everything you love from Next.js.

23- refine

Refine is a Next.js development kit that speeds up React-based CRUD app development. It streamlines tasks and provides standard solutions for essential features such as authentication, access control, routing, networking, state management, and i18n. Refine is headless, so you can fully customize the styling and use any data source, several backend headless CMS and systems, low-code and no-code systems, and authentication services.

refine Is An Open Source Rapid Application Development Kit For Next.js Developers
Build your React-based CRUD applications, without constraints.



Nextjs  SaaS starters

24- SaaS Starter Template

Startup is free Next.js template for startups and SaaS businesses comes with all the essential pages, components, and sections you need to launch a complete business website.

Key features:

  • Crafted for Startup and SaaS Business
  • Next.js 13 and Tailwind CSS
  • All Essential Business Sections and Pages
  • High-quality and Clean Design
  • Dark and Light Version
  • TypeScript Support and Much More ...
GitHub - NextJSTemplates/startup-nextjs: Startup is free Next.js template for startups and SaaS businesses comes with all the essential pages, components, and sections you need to launch a complete business website.
Startup is free Next.js template for startups and SaaS businesses comes with all the essential pages, components, and sections you need to launch a complete business website. - GitHub - NextJSTempl…

25- Next.js Enterprise Boilerplate

This project is an open-source template for enterprise projects! It's loaded with features that'll help you build a high-performance, maintainable, and enjoyable app.

GitHub - Blazity/next-enterprise: 💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.
💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your d…

26- Next.js Subscription Payments Starter

This repo offers a full all-in-one starter kit for high-performance SaaS applications.

Features:

  • Secure user management and authentication with Supabase
  • Powerful data access & management tooling on top of PostgreSQL with Supabase
  • Integration with Stripe Checkout and the Stripe customer portal
  • Automatic syncing of pricing plans and subscription statuses via Stripe webhooks
GitHub - vercel/nextjs-subscription-payments: Clone, deploy, and fully customize a SaaS subscription application with Next.js.
Clone, deploy, and fully customize a SaaS subscription application with Next.js. - GitHub - vercel/nextjs-subscription-payments: Clone, deploy, and fully customize a SaaS subscription application w…


27- SaaS UI

This is a free Next.js landing page template based on SaaS-UI. Feel free to submit any feature requests.

GitHub - saas-js/saas-ui-nextjs-landing-page: A free Next.js landing page template
A free Next.js landing page template. Contribute to saas-js/saas-ui-nextjs-landing-page development by creating an account on GitHub.

28- SaaS Starter MongoDB

Software as a service (or SaaS) is a way of delivering applications over the Internet—as a service. Instead of installing and maintaining software, one simply accesses it via the Internet, freeing himself from complex software and hardware management.

GitHub - grid-momenta/template-express-saas: Express based multi-tenant SaaS starter template. All type of multi-tenancy implemented with mongodb, typegoose, graphql, passport authentication and others.
Express based multi-tenant SaaS starter template. All type of multi-tenancy implemented with mongodb, typegoose, graphql, passport authentication and others. - GitHub - grid-momenta/template-expres…

29- Fest

Fest is a SaaS boilerplate built with Node.js & React. It's equipped with the following features:

  • User authentication and authorization with email verification and password reset.
  • Organizations management system.
  • Invite system: users can join organizations by having different roles.
  • Secure API endpoints and Front-end routes with role-based authorization.
GitHub - DimiMikadze/fest: SaaS boilerplate built with Node.js & React.
SaaS boilerplate built with Node.js & React. Contribute to DimiMikadze/fest development by creating an account on GitHub.


Backend Ready Starters

30- Supabase Next.js Starter

For your frontend, this application will be using Next.js and Tailwind CSS. You will learn how to maneuver around an app and build a strong static pricing page.

For your backend AND authentication, we will make use of Supabase. Supabase is open source and is all of the backend services that you will need to build your site. It includes a dedicated and scalable Postgres database and user management with Row Level Security!

Lastly, for payments, you will be using Stripe. It will be an individual payment checkout system that will create and update users' subscriptions.

GitHub - dijonmusters/build-a-saas-with-next-js-supabase-and-stripe
Contribute to dijonmusters/build-a-saas-with-next-js-supabase-and-stripe development by creating an account on GitHub.

31- Supabase

Another Supabase Next.js Starter.

This project will set you up for a very common situation: users can sign up with a magic link and then update their account with public profile information, including a profile image.

This demonstrates how to use:

  • User signups using Supabase Auth.
  • User avatar images using Supabase Storage.
  • Public profiles restricted with Policies.
  • Frontend using Next.js.
GitHub - fredysomy/nextjs-supabase
Contribute to fredysomy/nextjs-supabase development by creating an account on GitHub.

32- Pocketbase Next.js Starter

Pocketbase is a feature-rich open-source project that enables you to create backend in mins. This starter offers you a ready-to-work example with Next.js and Pocketbase that include authentication, session, user management and full CRUD example.

33- Nhost Starter

The ultimate starter kit for high-performance SaaS applications that uses Next.js, Nhost, and PostgreSQL.

Features

  • Postgres Database
  • GraphQL API
  • Magic Link and GitHub Authentication
  • Email Templates
  • Remote Stripe GraphQL API
  • Next.js
  • TypeScript
  • Tailwind CSS
  • GraphQL Codegen with React Query
GitHub - nhost/nextjs-stripe-starter
Contribute to nhost/nextjs-stripe-starter development by creating an account on GitHub.


34- Django Serverless with Next.js

This app is designed to work hand-in-hand with the Django-Serverless backend.

GitHub - supabase-community/nextjs-openai-doc-search: Template for building your own custom ChatGPT style doc search powered by Next.js, OpenAI, and Supabase.
Template for building your own custom ChatGPT style doc search powered by Next.js, OpenAI, and Supabase. - GitHub - supabase-community/nextjs-openai-doc-search: Template for building your own custo…

36- Taxomony

GitHub - shadcn-ui/taxonomy: An open source application built using the new router, server components and everything new in Next.js 13.
An open source application built using the new router, server components and everything new in Next.js 13. - GitHub - shadcn-ui/taxonomy: An open source application built using the new router, serv…

Lists

React and Next.js SaaS Starters

Best 15 Open Source React SaaS Templates and Next.js SaaS Starters For Startups
React and Next.js! React is a popular free and open-source JavaScript framework for building enterprise-class web apps, reactive user-interface, and fast end-results. Next.js is properly the most popular web framework nowadays, it is open source, React-based framework, developer-friendly, and pack…

Open-source SaaS Starters and Boilerplates

16 Open-source Starters and Boilerplate for Building Your SaaS Project
What is a SaaS (Software-as-a-Service)? SaaS or Software as a service, is a software delivery model over the internet which saves the user the cost of installing, configuring and using the software, on their machines. The most popular example for SaaS is Gmail, the Google email service, Google Dri…

28 Open-source Starters and Templates for Next.js

28 Next.js Free Open Source Boilerplate, Dashboards, Templates, and Starters
Next.js is an open-source web framework for React. It offers an easy workflow to build reactive scalable enterprise-grade apps. Next.js can also be used to to build desktop apps with Electron and Tauri (Rust), as well as mobile apps with Electron. Because Next.js has a vast wide

Read more