How to Set Up a NextJS Project with TypeScript

Begin

I want to record how to setting up a NextJS project with TypeScript.

Let’s go

Create a NextJS Project

yarn create next-app --typescript [your project path]

Yes, I used yarn. I prefer yarn to npm.

This article is very subjective. If you do not feel comfortable reading it. Please close it as soon as possible.
If you think my article can help you, you can subscribe to this site by using RSS.

Add an EditorConfig File

Add .editorconfig file to root directory.

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,tsx}]
charset = utf-8
indent_style = space
indent_size = 2


# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

Install Google TypeScript code style tools

npx install gst

.
.
.
Need to install the following packages:
  gts
Ok to proceed? (y) y

.
.
.
Already have devDependency for typescript:
-4.3.2
+^4.0.3
? Overwrite No
# I want to used latest TypeScript version. So I choose No

.
.
.
./tsconfig.json already exists
? Overwrite No
# We don't need to overwrite this file.

and need add a line code to tsconfig.json

{
  ...
  "extends": "./node_modules/gts/tsconfig-google.json",
  ...
}

and remove src/index.ts

rm src/index.ts

Add VSCode setting.json

I used VSCode
Create new file .vscode/settings.json

{
  "editor.renderWhitespace": "all",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptrect]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  }
}

Add TailWindCSS

I love tailwindcss. It is very useful. So I will add it on project.

Install Tailwind via

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Create your configuration files

npx tailwindcss init -p

Configure Tailwind to remove unused styles in production

// tailwind.config.js
 module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
   variants: {
     extend: {},
   },
   plugins: [],
 }

Include Tailwind in your CSS

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Now you can begin your work!

yarn dev

Reference

NextJS Document
What is EditorConfig?
Google TypeScript Style
Getting started with Tailwind CSS

Photo by Ferenc Almasi on Unsplash