DEV Community

Cover image for Next.js starter template
Michał Skolak
Michał Skolak

Posted on

Next.js starter template

Hi,
I created a starter template for next.js, it also contains typescript, tailwind and the most popular UI component library in 2023 -shadcn/ui.
Therefore, I would like to ask for feedback and any missing functionalities.
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 powered by TypeScript, styled with Tailwind CSS and Shadcn/ui. Features include dark mode, SEO optimization, and pre-configured Eslint, Prettier, Husky, and Lint-staged settings. 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
  • 🧪 Jest & React Testing Library - Configured for unit 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

Getting started

1. Clone this template in one of three ways

  • Using this repository as template

use-this-template-button

  • Using create-next-app
npx create-next-app -e https://github.com/Skolaczk/next-starter my-project-name
Enter fullscreen mode Exit fullscreen mode
  • Using git clone
git clone https://github.com/Skolaczk/next-starter my-project-name
Enter fullscreen mode Exit fullscreen mode

2. Install dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

3. Prepare husky

It is required if you want husky to work

npm run prepare
Enter fullscreen mode Exit fullscreen mode

4. Run the dev server

You can start the server using this command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

and open http://localhost:3000/ to see this app.

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

Made by Michał Skolak

Top comments (2)

Collapse
 
artydev profile image
artydev

Thank you

Collapse
 
samurai71 profile image
Mark Landeryou

Awesome article. I am looking at creating my own starter template any suggestions or tips?