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 git@github.com: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