This content originally appeared on DEV Community and was authored by geric
Table of Contents
Tech Stack
Project Setup
Config Files
Tech Stack
- next.js
- typescript
- yarn
- husky
- prettier
- eslint
Project Setup
yarn create next-app --typescript
modify .gitignore
yarn add --dev @typescript-eslint/eslint-plugin
yarn add --dev prettier eslint-config-prettier
touch .eslintrc.json .prettierrc.json .prettierignore
npx husky-init && yarn
modify package.json (scripts)
modify .husky/pre-commit
# yarn commands
yarn lint
yarn build
yarn prettier-check
yarn prettier-fix
yarn dev
Config Files
Opinionated configurations, modify it as you see fit.
.eslintrc.json
{
"plugins": ["@typescript-eslint"],
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "error"
}
}
.prettierrc.json
{
"singleQuote": true,
"semi": false,
"tabWidth": 4
}
.prettierignore
node_modules
**/.next/**
**/_next/**
**/dist/**
packages/next/bundles/webpack/packages/*.runtime.js
packages/next/bundles/webpack/packages/lazy-compilation-*.js
packages/next/compiled/**
packages/react-refresh-utils/**/*.js
packages/react-refresh-utils/**/*.d.ts
packages/react-dev-overlay/lib/**
**/__tmp__/**
lerna.json
.github/actions/next-stats-action/.work
packages/next-swc/crates/**/*
packages/next-codemod/transforms/__testfixtures__/**/*
packages/next-codemod/transforms/__tests__/**/*
packages/next-codemod/**/*.js
packages/next-codemod/**/*.d.ts
packages/next-env/**/*.d.ts
test-timings.json
test/**/out/**
bench/nested-deps/pages/**/*
bench/nested-deps/components/**/*
.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# vscode workspace setting
.vscode
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prepare": "husky install",
"prettier-check": "prettier --check .",
"prettier-fix": "prettier --write ."
}
This content originally appeared on DEV Community and was authored by geric
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
geric | Sciencx (2022-03-31T16:11:38+00:00) Nextjs Typescript Starter Template. Retrieved from https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/
" » Nextjs Typescript Starter Template." geric | Sciencx - Thursday March 31, 2022, https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/
HARVARDgeric | Sciencx Thursday March 31, 2022 » Nextjs Typescript Starter Template., viewed ,<https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/>
VANCOUVERgeric | Sciencx - » Nextjs Typescript Starter Template. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/
CHICAGO" » Nextjs Typescript Starter Template." geric | Sciencx - Accessed . https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/
IEEE" » Nextjs Typescript Starter Template." geric | Sciencx [Online]. Available: https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/. [Accessed: ]
rf:citation » Nextjs Typescript Starter Template | geric | Sciencx | https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.