DEV Community

geric
geric

Posted on

Nextjs Typescript Starter Template

#nextjs #typescript #template #starter

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
Enter fullscreen mode Exit fullscreen mode

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" } }
Enter fullscreen mode Exit fullscreen mode

.prettierrc.json

{ "singleQuote": true, "semi": false, "tabWidth": 4 }
Enter fullscreen mode Exit fullscreen mode

.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/**/*
Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

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 ." }
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
hlexnc profile image
HlexNC •

This is really cool, thanks. Do you think it will work with static-websites, like GitHub pages?