Development

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

Hazem Abbas

Jul 20, 2023 — 20 min read

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.

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.

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.

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.

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.

6- Next.js + MongoDB

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

7- Nextjs + MongoDB Blog APP

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

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

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

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.

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

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.

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

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.

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.

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 🛒

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

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

17- Next.js Express Full Stack Boilerplate

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.

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.

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).

21- Nextin

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

22- Nextra

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

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.

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 ...

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.

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

27- SaaS UI

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

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.

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.

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.

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.

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.