Nextjs Typescript Starter Template

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-eslin…


This content originally appeared on DEV Community and was authored by geric

Table of Contents

Tech Stack
Project Setup
Config Files

Tech Stack

  1. next.js
  2. typescript
  3. yarn
  4. husky
  5. prettier
  6. 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
APA

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/

MLA
" » Nextjs Typescript Starter Template." geric | Sciencx - Thursday March 31, 2022, https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/
HARVARD
geric | Sciencx Thursday March 31, 2022 » Nextjs Typescript Starter Template., viewed ,<https://www.scien.cx/2022/03/31/nextjs-typescript-starter-template/>
VANCOUVER
geric | 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.

You must be logged in to translate posts. Please log in or register.