Best 16 Free Next.js 14 Starters and Boilerplate To Speed up your Project Development in 2024
As we develop our primary apps using Next.js, we wrote several articles and tutorials about it. Now, it's time to update the collection of the best open-source Next.js 14 starters and boilerplates that can save startups, agencies, and developers a lot of time and money.
But before we begin, let's explore the new features of the new Next.js 14 release.
Next.js 14 Features
Next.js 14 offers a range of exciting features and improvements that continue to enhance the developer experience. Some of the standout features include:
- Server Components: Improved support for server-side rendering and component-based architectures, enabling more efficient and scalable applications.
- File Uploading: Simplified file uploading processes directly within the Next.js app directory, making it easier to handle and preview file uploads.
- Stripe Integration: Simplified payment processing with Stripe, allowing for easy setup and management of transactions.
- Prisma ORM with Postgres: Seamless integration with Postgres databases, making database management more efficient and developer-friendly.
- React Email and Resend: Tools for creating and sending emails using React components, enhancing email functionality within applications.
- Layouts: Advanced layout management to create more dynamic and responsive user interfaces, improving the overall user experience.
- UploadThing: Effortless file upload and preview functionalities, streamlining the process of managing media content.
- LuciaAuth v3: Enhanced authentication and authorization mechanisms for secure user management, ensuring robust security protocols.
- Enhanced API Routes: More flexible and efficient ways to define and handle API endpoints, improving backend interactions.
- Radix UI and Tailwind CSS: Pre-built UI components and styling solutions for quick and beautiful UI development, saving development time and effort.
- Next-International: Type-safe internationalization support for building multilingual applications, making it easier to reach a global audience.
- Server Actions: New server-side functionalities that enable more powerful backend interactions, enhancing server capabilities.
- App Router: Improved routing capabilities with a focus on performance and developer experience, making navigation smoother.
- Vercel Deployments: Streamlined production and preview deployments on Vercel, simplifying the deployment process.
These features collectively make Next.js 14 a powerful and versatile framework for modern web development, enabling developers to build high-performance, scalable applications with ease.
In this collection, you will find the best open-source Next.js 14 starters that make developers' lives easier by saving them time and money.
1. Next.js 14+ boilerplate
This Next.js 14+ project is a boilerplate and starter kit for Next.js 14+, Tailwind CSS 3, and TypeScript, designed with a focus on developer experience.
It includes tools like ESLint, Prettier, Husky, Jest, React Testing Library, Storybook, and GitHub actions.
The free boilerplate is ideal for building server-first as well as statically generated websites.
Features
- Strict Mode for TypeScript and React 18
- Testing with Jest and react-testing-library
- Type checking TypeScript
- Components generation with Plop and atomic design convention
- Linter with ESLint
- GH actions
- Code Formatter with Prettier
- Next.js for Static Site Generator
- Husky for Git Hooks
- Nextjs custom layouts
- Storybook for components documentation
- Message convention for git
- Maximize lighthouse score
- Integrate with Tailwind CSS
- Absolute Imports using @ prefix
- Lint-staged for running linters on Git staged files
- T3 env Manage your environment variables with ease
2. Nextal
Nextal is a free starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Vitest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Features
- β‘οΈ Next 14 with React 18 - Using the /app folder.
- π¦Ύ TypeScript, of course
- π« Vitest - unitary testing made easy
- π¨ Tailwind - next generation utility-first CSS
- π Dark Mode
- π Atomic Design organization
- π Absolute imports
- π Hero icons
- βοΈ Deploy on Vercel, zero-config
jvidalv3. Play Next.js (SaaS Starter)
Play Next.js is a free and Open-source SaaS starter kit and boilerplate, designed and built for SaaS startups, apps, businesses, and more.
With its premium design and essential UI components and pages, it provides everything you need to kickstart a feature-rich SaaS website.
Features
- PostgreSQL for Database: Integration with Prisma ensures data integrity and reliability.
- NextAuth for Authentication: Provides secure login and user management.
- MDX for Blogs: Combines Markdown and JSX for a complete blogging solution.
- Stripe for Subscription Payments: Robust security features and smooth checkout experiences.
- Tailwind CSS for Styling: Highly flexible and customizable utility-first CSS framework.
- Essential SaaS Pages & Components: Includes login, signup, blog, about, and other pages.
- Crafted Using TailGrids Components: Offers professional aesthetics and usability, reducing development time and effort.
NextJSTemplates4. Nextplate
Nextplate is a free starter template built with Next.js 14.1+ and TailwindCSS. It provides you with almost everything you need to jump-start your Next.js project. Try Nextplate and save yourself hours of work.
Features
- π₯ Multi-Authors
- π― Similar Posts Suggestion
- π Search Functionality
- π Dark Mode
- π·οΈ Tags & Categories
- π Netlify setting pre-configured
- π Support contact form
- π± Fully responsive
- π Write and update content in Markdown / MDX
- π¬ Disqus Comment
- π³ Syntax Highlighting
- π 15+ Pre-designed Pages
zeon-studio5. Medusa Next.js Starter Template
This is a Next.js 14.1 template for creating the perfect website with Medusa.
Features Highlight
Its features include:
- Full ecommerce support:
- Product Detail Page
- Product Overview Page
- Search with Algolia / MeiliSearch
- Product Collections
- Cart
- Checkout with PayPal and Stripe
- User Accounts
- Order Details
- Full Next.js 14 support:
- App Router
- Next fetching/caching
- Server Components
- Server Actions
- Streaming
- Static Pre-Rendering
medusajs6. ChadNext
ChadNext is a quick starter template for Next.js projects, offering features like Next.js 14 App router, Shadcn UI, LuciaAuth, Prisma, Server Actions, Stripe, and Internationalization.
Hazem Abbas
7. Next 14+ Starter
This is a feature-rich Next.js starter template, packed with features like TypeScript, Tailwind CSS, Next-auth, Eslint, Stripe, testing tools and more. Jumpstart your project with efficiency and style.
Features
- π Next.js 14 (App router)
- βοΈ React 18
- π Typescript
- π¨ TailwindCSS - Class sorting, merging and linting
- π οΈ Shadcn/ui - Customizable UI components
- π΅ Stripe - Payment handler
- π Next-auth - Easy authentication library for Next.js (GitHub provider)
- π‘οΈ Prisma - ORM for node.js
- π React-hook-form - Manage your forms easy and efficient
- π Zod - Schema validation library
- π§ͺ Jest & React Testing Library - Configured for unit testing
- π Playwright - Configured for e2e testing
- π Absolute Import & Path Alias - Import components using
@/prefix - π Prettier - Code formatter
- π§Ή Eslint - Code linting tool
- πΆ Husky & Lint Staged - Run scripts on your staged files before they are committed
- πΉ Icons - From Lucide
- π Dark mode - With next-themes
- πΊοΈ Sitemap & robots.txt - With next-sitemap
- π Commitlint - Lint your git commits
- π€ Github actions - Lint your code on PR
- βοΈ T3-env - Manage your environment variables
- π― Perfect Lighthouse score
- π I18n with Paraglide
Skolaczk8. Nextbase Nextjs Supabase Starter
Nextbase Lite is a simple Next.js 13 + Supabase boilerplate. It includes a Next.js 13 app with Typescript, Supabase and Tailwind CSS. It includes the all new app folder, layout components, React server components and more!
Although this project is based on Next.js 13 but it can be upgraded easily to 14.1.
Features
- π Next.js 13 with async components
- π» Data fetching examples in React server and client components. Suspenseful data fetching with minimal loading screens.
- βοΈ React query setup configured
- π₯ React Hot Toast component
- π» Fully typed with Typescript. Includes automatic type generation for Supabase tables
- π¨ Tailwindcss
- π§ͺ Unit testing and integration testing setups built-in
- π Eslint, typescript, prettier, postcss configured for dev and test environments
- π Automatic sitemap generation
- π SEO metadata, JSON-LD and Open Graph tags with NEXT SEO
- βοΈ Semantic release with Automatic changelog generation
- π¨ Prettier Code formatter
- π Minimal styling
- π Codebase which is easy to read and modify
imbhargav59. Nextjs 14+ Latest Project Template
Next14+ Latest Project Template: An easy-to-use and pre-configured project template for kick starting your Next.js 14+ projects effortlessly.
This template comes with all the necessary packages and configurations, allowing you to quickly set up and dive into developing your next cutting-edge web application with Next.js.
MdWahiduzzamanEmon10. Next js 14 boilerplate
The Next Starter aims to give you a starting point with everything ready to work and launch to production. Web Vitals with 100% by default. Folder structure ready. Tooling ready. SEO ready. SSR ready.
AnwarHossainSRNetcs
A Personal Website and Blog Starter based on Next 14, TailwindCSS with DaisyUI, Contentful, and Turso DB.
Features
- Flexible and composable content models
- SEO ready with Metadata being generated based on specific SEO fields but with fallbacks in place
- Generation of GraphQL (schema, and types), in sync with the content types via graphql-codegen.
- Typescript
- Tailwind CSS via DaisyUI
- Nextjs SSR components
- Contentful Live preview
- Contentful Dashboard example App for visualizing stats on Articles views counts
pauloamgomes11. Next JS 14 boilerplate for indiehackers!
This is a cool starter for Next.js 14 that uses Uses Postgres as DB, NextAuth 4, Tailwind CSS has support for dark modem and you can also have a Shadcn-ui version.
Features
- Next.js 14 App Directory
- Node pg support
- NextAuth 4
- Radix UI Primitives
- Tailwind CSS
- Google fonts
- Icons from Lucide
- Dark mode with
next-themes - Tailwind CSS class sorting, merging and linting.
soulbliss12. Next Starter
The aim for this starter is to give you a starting point with everything ready to work and launch to production. Web Vitals with 100% by default. Folder structure ready. Tooling ready. SEO ready. SSR ready.
AnwarHossainSR13. SupaNext Starter Kit
a Next.js 14 Supabase starter with dozens of useful tools and libraries to speed up your production.
Features
- β‘οΈ Next.js 14 (App Router)
- π Supabase w/ supabase-ssr - Works across the entire Next.js stack (App Router, Pages Router, Client, Server, Middleware, It just works!)
- βοΈ React 18
- β TypeScript
- π¦ pnpm - Fast, disk space efficient package manager
- π¨ Tailwind
- π shadcn/ui - Beautifully designed components that you can copy and paste into your apps.
- π§ͺ Jest w/SWC + React Testing Library - Unit tests for all of your code.
- ποΈ MSWv2 - Intercept requests inside your tests (set up for testing only)
- πͺTanStackQueryv5 - The best way to fetch data on the client
- π ESLint β To find and fix problems in your code
- π Prettier β Code Formatter for consistent style
- πΆ Husky β For running scripts before committing
- π« lint-staged β Run ESLint and Prettier against staged Git files
- π· Github Actions β Run Type Checks, Tests, and Linters on Pull Requests
- π Path Mapping β Import components or images using the
@prefix - βͺβ« Dark mode - Toggle theme modes with next-themes
- β¨ Next Top Loader - Render a pleasent top loader on navigation with nextjs-toploader
- π Lots Extras - Next Bundle Analyzer, Vercel Analytics, Vercel Geist Font
michaeltroya14. Next.js 14 Admin Dashboard Starter Template
Next.js 14 Admin Dashboard Starter Template With Shadcn-ui
Built with the Next.js App Router. It uses Auth.js, Tailwind CSS, and comes with React Hook Form, and Rich Table library.
It comes with signup page, user profiles page, kanban board, and employee pages.
Kiranism15. Next SaaS Stripe Starter
This is an open-source SaaS Starter with User Roles & Admin Panel. Built using Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, Stripe, Server Actions.
mickasmt16. NextBase Starter Nextbase Lite
This is yet another πβ‘οΈ Free Boilerplate and Starter kit for Next.js 14+, Supabase, Tailwind CSS 3.2 and TypeScript. π Next.js π₯ Supabase π» TypeScript π ESLint π¨ Prettier πΆ Husky π§Ή Lint-Staged π§ͺ Jest π§ͺ Testing Library πΉοΈ Playwright βοΈ Commitizen π¬ Commitlint π» VSCode πͺοΈ Vercel π¨ PostCSS π Tailwind CSS βοΈ React Query.
Features
- π Next.js 13 with async components
- π» Data fetching examples in React server and client components. Suspenseful data fetching with minimal loading screens.
- βοΈ React query setup configured
- π₯ React Hot Toast component
- π» Fully typed with Typescript. Includes automatic type generation for Supabase tables
- π¨ Tailwindcss
- π§ͺ Unit testing and integration testing setups built-in
- π Eslint, typescript, prettier, postcss configured for dev and test environments
- π Automatic sitemap generation
- π SEO metadata, JSON-LD and Open Graph tags with NEXT SEO
- βοΈ Semantic release with Automatic changelog generation
- π¨ Prettier Code formatter
- π Minimal styling
- π Codebase which is easy to read and modify
imbhargav5