How to Set Up a NextJS Project with TypeScript
source link: https://iiiyu.com/2021/06/08/how-to-set-up-a-nextjs-project-with-typescript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK