Features · Deployment · Getting started · Scripts overview · Contribution · Support

🎉 Features

• 🚀 Next.js 16 (App router, Cache components)
• ⚛️ React 19
• 📘 Typescript
• 🎨 Tailwind CSS 4 - Class sorting, merging and linting
• 🛠️ Shadcn/ui - Customizable UI components
• 💵 Stripe - Payment handler
• 🔒 Next-auth - Easy authentication library for Next.js (GitHub provider)
• 🛡️ Drizzle - ORM for node.js
• 🔍 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
• 💅 Biome - Fast formatter and linter
• 🐶 Husky & Lint Staged - Run scripts on your staged files before they are committed
• 🔹 Icons - From Lucide
• 🌑 Dark mode - With next-themes
• 📝 Commitlint - Lint your git commits
• 🤖 Github actions - Lint your code on PR
• ⚙️ T3-env - Manage your environment variables
• 🗺️ Sitemap & robots.txt
• 💯 Perfect Lighthouse score
• 💾 Neon database
• 🌐 I18n with next-intl

🚀 Deployment

Easily deploy your Next.js app with Vercel by clicking the button below:

🎯 Getting started

Requires Node.js 22 or newer.

1. Clone this template in one of three ways

1. Using this repository as template

   

2. Using create-next-app

   npx create-next-app -e https://github.com/Skolaczk/next-starter my-project-name
   

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

📁 Project structure

.
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── drizzle                         # Drizzle migrations and metadata
├── drizzle.config.ts               # Drizzle Kit configuration
├── public                          # Public assets folder
└── src
    ├── __tests__                   # Unit and e2e tests
    ├── actions                     # Server actions
    ├── app                         # Next JS App (App Router)
    ├── components                  # React components
    ├── lib                         # Functions, utilities
    ├── styles                      # Styles folder
    └── env.mjs                     # Env variables config file

⚙️ Scripts overview

The following scripts are available in the package.json:

• dev: Run development server
• build: Build the app
• start: Run production server
• preview: Run build and start commands together
• lint: Lint the code using Biome
• lint:fix: Fix linting errors
• format:check: Checks the code for proper formatting
• format:write: Fix formatting issues
• check: Run the linter and formatter together
• check:fix: Fix linting and formatting issues in one go
• 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:

1. Fork the repository.
2. Create a new branch.
3. Make your changes, and commit them.
4. Push your changes to the forked repository.
5. Create a pull request.

❤️ Support

If you liked the project, I will appreciate if you leave a star. 🌟😊

Made by Michał Skolak