DEV Community

geric
geric

Posted on

4 3 1

Nextjs Typescript Starter Template

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

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?

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay