Next.js with typescript example template

An example template made using Next.js and Typescript to start a new project. The template is setup with Prettier, ESLint, StyleLint and Lint Staged.

This template use next.js version 12.3.1. Read more about release

Why this template

I made this template because I have to set up every time Prettier, ESLint, StyleLint and Lint Staged for my new next.js projects. And I thought this might be useful for developers who are looking for configuration or starter or example templates.

Before getting started

Make sure you have installed Node.js 12.22.0 or higher on your machine. You can use nvm to manage multiple node version on your machine.

Getting started

You can setup this project using npm or yarn package managers.

I would recommend to installed or enabled yarn package manager on your machine.

Clone repo

git clone https://github.com/binodnepali/nextjs-with-typescript-example-template.git
#or
git clone [email protected]:binodnepali/nextjs-with-typescript-example-template.git

Navigate to cloned repo

cd nextjs-with-typescript-example-template

Install dependencies

yarn install
#or
npm install

Start development server

yarn dev
#or
npm run dev

Open http://localhost:3000 with your browser to see the result.

Build for production

yarn build
#or
npm run build

Start preview server after build

yarn start
#or
npm run start

Open http://localhost:3000 with your browser to see the result.

Commit

Open interactive terminal to write conventional commit message

# yarn
yarn commit

# npm
npm run commit

Run release

Follow the Conventional Commits Specification in your repository. And when you're ready to release, run below scripts.

yarn release
#or
npm run release

Learn More

To learn more about Next.js, ESLint, Prettier, StyleLint and lint-staged, take a look at the following resources:

• Next.js Documentation - Learn about Next.js features and API
• Next.js ESLint - Learn about how to Next.js ESLint setup
• Prettier Setup - Learn about how to setup prettier
• Prettier Integrations - Learn about how to setup prettier with other tools
• ESLint Setup - Learn about how to ESLint
• StyleLint Setup - Learn about how to setup StyleLint
• Lint Staged Setup - Learn about how to setup lint-staged
• Standard Version - Learn about how to setup standar version