Hi,
I created a starter template for next.js, it also contains typescript, tailwind, shadcn/ui. I have already written about it here, but I have added some new functionalities such as: Next-auth, Prisma, React-hook-form, T3-env.
If you liked the project, I will appreciate if you leave a star. 🌟
https://github.com/Skolaczk/next-starter
Overview
A Next.js starter template, packed with features like TypeScript, Tailwind CSS, Next-auth, Eslint, 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
- 🔒 Next-auth - Easy authentication library for Next.js (GitHub provider)
- 💵 Stripe - Payment handler
- 🛡️ 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
🚀 Deployment
Easily deploy your Next.js app with Vercel by clicking the button below:
🎯 Getting started
1. Clone this template in one of three ways
- Using this repository as template
- Using
create-next-app
npx create-next-app -e https://github.com/Skolaczk/next-starter my-project-name
- Using
git clone
git clone https://github.com/Skolaczk/next-starter my-project-name
2. Install dependencies
npm install
3. Set up environment variables
Create .env
file and set env variables from .env.example
file.
4. Prepare husky
It is required if you want husky to work
npm run prepare
5. Run the dev server
You can start the server using this command:
npm run dev
and open http://localhost:3000/ to see this app.
⚙️ Scripts overview
The following scripts are available in the package.json
:
-
dev
: Run development server -
build
: Build the app -
start
: Run production server -
preview
: Runbuild
andstart
commands together -
lint
: Lint the code using Eslint -
lint:fix
: Fix linting errors -
format:check
: Checks the code for proper formatting -
format:write
: Fix formatting issues -
typecheck
: Type-check TypeScript without emitting files -
test
: Run unit tests -
test:watch
: Run unit tests in watch mode -
e2e
: Run end-to-end tests -
e2e:ui
: Run end-to-end tests with UI -
postbuild
: Generate sitemap -
prepare
: Install Husky for managing Git hooks
🤝 Contribution
To contribute, please follow these steps:
- Fork the repository.
- Create a new branch.
- Make your changes, and commit them.
- Push your changes to the forked repository.
- Create a pull request.
❤️ Support
If you liked the project, I will appreciate if you leave a star. 🌟😊
Made by Michał Skolak
Top comments (8)
Nice starter project, but how do you save the coverage information collected during end-to-end test? I'm currently using cypress/code-coverage with babel-plugin-istanbul and its config is so confused due to the fact that nextjs version >= 12 use SWC as a replacement for babel.
Very well done. but I have a question. do you plan to maintain this? I have seen a lot of starter templates but most of the problems are it becoming an unmaintained mess
A very well done starter. Kudos!
Awesome! I've been looking for an example that used shadcn UI.
Thank you very much for your hard word, sir !
nice starter thank you for making that open source
Cool <3
Nice Starter, I Would love to do that and Also i can Follow This