This is a boilerplate for starting a Next.js project with the App Router feature enabled.
The project is preconfigured with TypeScript, Prettier, ESLint, and Stylelint to provide a foundation for building NextJS project.
Prettier: Automated code formatting.
ESLint: Linting for ts, tsx files.
Stylelint: Linting for css,scss,module.scss files.
Clone this repository:
git clone https://github.com/masa0902dev/nextjs-app-router-ts-pretiter-eslint-stylelint.git
cd nextjs-app-router-ts-pretiter-eslint-stylelint
npm install- npx create-next-app@latest
- copy and paste package.json, config files (prettier,eslint,stylelint,.vscode)
- npm install (or, npm ci)
This project includes the following npm scripts:
-
dev: Starts the development server using Next.js with TurboPack on port 3001.
echo 'this is test repo, using port 3001' && next dev --turbopack -p 3001
-
build: Checks the code formatting with Prettier, lints the styles with Stylelint, and builds the Next.js application.
prettier --check . && stylelint --allow-empty-input "**/*.{css,scss}" && next build
-
start: Starts the production server for the Next.js application.
next start
-
format: Formats the code using Prettier and echoes a completion message.
prettier --write . && echo '\nPrettier Finished'
-
lint:es: Lints the JavaScript/TypeScript code using ESLint and automatically fixes issues.
next lint --fix && echo '\nESLint Finished'
-
lint:style: Lints the styles using Stylelint and automatically fixes issues.
stylelint --fix --allow-empty-input "**/*.{css,scss}" && echo 'StyleLint Finished'
-
check: Runs the format, ESLint, and Stylelint checks in sequence.
npm run format && npm run lint:es && npm run lint:style
-
build:local: Similar to the build command, but formats the code before building.
prettier --write . && stylelint --allow-empty-input "**/*.{css,scss}" && next build