Projects

Custom Next.js Template

2023·1 min read

React
TypeScript
Tailwind CSS
Next.js
shadcn UI
Zustand
GitHub (opens in a new tab)

The template most of the other projects here start from.

The template most of the other projects here start from.

It exists because the first hour of a new Next.js app is always the same hour: wiring TypeScript paths, getting ESLint and Prettier to stop contradicting each other, adding a dark theme that does not flash white before hydration, installing shadcn/ui, and setting up a pre-commit hook so none of it decays by week three. Doing that once and keeping it in a repository turns the hour into a single command — create-next-app -e pointed here.

Ships with next-themes, absolute imports, Husky hooks, Tailwind and the shadcn component set already configured. There is a Vite sibling for projects that do not need a server.

Unglamorous, and by a wide margin the most reused thing on this page.

Introduction#

Welcome to Sadge Template! This is a custom Next.js project starter template designed to help you kickstart your web development projects quickly and efficiently.

You can also find Sadge Vite template here

Features#

  • Dark theme with next-themes
  • TypeScript support
  • ESLint and Prettier
  • Absolute imports
  • Husky pre-commit hooks
  • Tailwind CSS
  • Shadcn-ui components

Prerequisites#

Before you begin, ensure you have the following installed on your machine:

  • Node.js (at least version X.X.X)
  • npm or Yarn or pnpm (preferred)

Usage create-next-app#

The easiest way to create a new project based on this template is by using create-next-app with the -e flag. Run the following command in your terminal:

npx create-next-app -e https://github.com/Vette1123/next-js-starter-template --use-pnpm

More projects

  • Next.js Authentication Using Clerk2023 · React
  • open-ai-hooks (npm package)2023 · TypeScript
  • Simple Time Logger2023 · React
All projects