Next.js Starter Template

A Minimal Next.js Starter Template with TypeScript, Tailwind CSS, pre-configured with ESLint, and Prettier

Features

• ⚡ Next.js - A React Framework for Production
• 🔥 App Router - It is a new paradigm for building applications using React's latest features.
• 🎨 Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development
• 📦 TypeScript - A typed superset of JavaScript that compiles to plain JavaScript
• 📝 ESLint - The pluggable linting utility for JavaScript and JSX
• 🛠 Prettier - An opinionated code formatter

Getting Started

pnpx create-next-app -e "https://github.com/Khushal-ag/nextjs-template" <project-name>

OR

Install degit globally

pnpm i -g degit || yarn global add degit || npm i -g degit

Create a new project from this template

degit Khushal-ag/nextjs-template <project-name>
cd <project-name>

Install dependencies

pnpm i || yarn || npm i

Initialize a new git repository (Optional):

git init
git add .
git commit --no-verify -m "init"

Available Scripts

In the project directory, you can run:

Script	Description
dev	Runs the app in the development mode.
build	Builds the app for production to the .next folder.
start	Runs the built app in the production mode.
preview	Builds and serves the app in the production mode.
lint	Runs next lint on the project.
type-check	Runs TypeScript type checker.
fmt:check	Checks if the code is formatted with Prettier.
fmt:write	Formats the code with Prettier.

Folder Structure

.
├── public
│   ├── favicon.ico
│   ├── nextjs-dark.svg
│   └── nextjs-light.svg
├── src
│   ├── app
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── styles
│   │   └── globals.css
│   └── types
│       └── reset.d.ts
├── LICENSE
├── README.md
├── next.config.js
├── next-env.d.ts
├── package.json
├── postcss.config.js
├── renovate.json
├── tailwind.config.js
└── tsconfig.json

After Installation Checklist

• Update package.json with your project details.
• Update README.md with your project details.
• Update LICENSE with your name and year.
• Update layout.tsx to your liking.
• Clear page.tsx and write your own.

Switching Package Manager

This template uses pnpm as the default package manager. If you want to use npm or yarn, you need to remove the pnpm-lock.yaml file and run npm i or yarn to generate the lock file for the respective package manager.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributors

Note: It may take up to 24h for the contrib.rocks plugin to update because it's refreshed once a day.