Nextjs Typescript Starter Template

geric — Thu, 31 Mar 2022 16:11:38 +0000

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 ."
}

DEV Community: geric

Nextjs Typescript Starter Template

Table of Contents

Tech Stack

Project Setup

Config Files