🚀
Next.js13.2 + Typescript + Tailwind CSS + Eslint + Prettier セットアップ
今回はNext.jsの初期セットアップ方法についてまとめます。
以下について説明します。
- Next.js
- Typescript
- Tailwindcss
- ESlint
- Prettier
また、個人的に最低限導入したほうがいいと思ったESlintのプラグインや各設定についても紹介します。
※Tailwindcssを導入しない場合は、最後の章は飛ばしていただいて問題ありません。
Next.jsのプロジェクトの作成
create-next-app使用してTypeScriptプロジェクトを作成します。
yarn create next-app --typescript
プロジェクトの名前は何ですか?→sample
ESLintを使用しますか？→Yes
src/ ディレクトリを使用しますか？→Yes
実験的な app/ ディレクトリを使用しますか→No
インポート エイリアスを設定→そのままEnter
sample上で以下のコマンドを実行
yarn dev
サーバを立ち上げて、デフォルト画面が表示されれば完了です。
不要なファイルを削除
デフォルトページなどは必要ありませんので、ここで必要のないものは削除しておきます。
pages/_app.tsx
- import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
pages/api/hello.ts
ファイルごと削除
pages/index.tsx
- import Head from 'next/head'
- import Image from 'next/image'
- import { Inter } from 'next/font/google'
- import styles from '@/styles/Home.module.css'
- const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
- <Head>
- <title>Create Next App</title>
- <meta name="description" content="Generated by create next app" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="icon" href="/favicon.ico" />
- </Head>
- <main className={styles.main}>
- <div className={styles.description}>
- <p>
- Get started by editing
- <code className={styles.code}>src/pages/index.tsx</code>
- </p>
- <div>
- <a
- href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- By{' '}
- <Image
- src="/vercel.svg"
- alt="Vercel Logo"
- className={styles.vercelLogo}
- width={100}
- height={24}
- priority
- />
- </a>
- </div>
- </div>
- <div className={styles.center}>
- <Image
- className={styles.logo}
- src="/next.svg"
- alt="Next.js Logo"
- width={180}
- height={37}
- priority
- />
- <div className={styles.thirteen}>
- <Image
- src="/thirteen.svg"
- alt="13"
- width={40}
- height={31}
- priority
- />
- </div>
- </div>
- <div className={styles.grid}>
- <a
- href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Docs <span>-></span>
- </h2>
- <p className={inter.className}>
- Find in-depth information about Next.js features and API.
- </p>
- </a>
- <a
- href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Learn <span>-></span>
- </h2>
- <p className={inter.className}>
- Learn about Next.js in an interactive course with quizzes!
- </p>
- </a>
- <a
- href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Templates <span>-></span>
- </h2>
- <p className={inter.className}>
- Discover and deploy boilerplate example Next.js projects.
- </p>
- </a>
- <a
- href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
- className={styles.card}
- target="_blank"
- rel="noopener noreferrer"
- >
- <h2 className={inter.className}>
- Deploy <span>-></span>
- </h2>
- <p className={inter.className}>
- Instantly deploy your Next.js site to a shareable URL
- with Vercel.
- </p>
- </a>
- </div>
- </main>
+ <div></div>
</>
)
}
pages/public/favicon.ico
ファイルごと削除
pages/public/next.svg
ファイルごと削除
pages/public/thirteen.svg
ファイルごと削除
pages/public/vercel.svg
ファイルごと削除
pages/styles/Home.module.css
ファイルごと削除
pages/styles/globals.css
// 中身を全て削除
VScodeに設定を追加（インポートしたときに絶対パスになる）
.vscode/settings.json
+ {
+ "typescript.preferences.importModuleSpecifier": "non-relative",
+ }
Prettier導入
yarn add -D prettier
eslint-config-prettierも入れておく
後から導入するeslintとの競合を防ぐためのもの
yarn add -D eslint-config-prettier
eslint-config-prettierを有効化する
.eslintrc.json
{
- "extends": "next/core-web-vitals"
+ "extends": ["next/core-web-vitals","prettier"]
}
VSCodeの設定ファイルに設定を追加
.vscode/settings.json
{
"javascript.preferences.importModuleSpecifier": "non-relative",
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
}
ESLintのプラグインを導入
eslint-plugin-sort-keys-custom-order
typeやobjectのキーを自動でソートしてくれるプラグイン
yarn add -D eslint-plugin-sort-keys-custom-order
設定を追加する
.eslintrc.json
{
+ "plugins": ["sort-keys-custom-order"],
"extends": ["next/core-web-vitals", "prettier"],
+ "rules": {
+ // For JS objects sorting
+ "sort-keys-custom-order/object-keys": [
+ "error",
+ { "orderedKeys": ["id", "name", "title"] }
+ ],
+ // For TS types sorting
+ "sort-keys-custom-order/type-keys": [
+ "error",
+ { "orderedKeys": ["id", "name", "title"] }
+ ]
+ }
}
.vscode/settings.json
{
"javascript.preferences.importModuleSpecifier": "non-relative",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.codeActionsOnSave": ["source.fixAll.eslint"]
}
eslint-plugin-simple-import-sort
import/exportを自動でソートしてくれるプラグイン
yarn add -D eslint-plugin-simple-import-sort
設定を追加
.eslintrc.json
{
- "plugins": ["sort-keys-custom-order"],
+ "plugins": ["sort-keys-custom-order", "simple-import-sort"],
"extends": ["next/core-web-vitals", "prettier"],
"rules": {
// For JS objects sorting
"sort-keys-custom-order/object-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
// For TS types sorting
"sort-keys-custom-order/type-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
+ "simple-import-sort/imports": "error",
+ "simple-import-sort/exports": "error"
}
}
eslint-plugin-import
eslint-plugin-simple-import-sortと組み合わせて使うことによって機能を拡張する
yarn add -D eslint-plugin-import
設定を追加
.eslintrc.json
{
- "plugins": ["sort-keys-custom-order", "simple-import-sort"],
+ "plugins": ["sort-keys-custom-order", "simple-import-sort", "import"],
"extends": ["next/core-web-vitals", "prettier"],
"rules": {
// For JS objects sorting
"sort-keys-custom-order/object-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
// For TS types sorting
"sort-keys-custom-order/type-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
+ "import/first": "error",
+ "import/newline-after-import": "error",
+ "import/no-duplicates": "error"
}
}
eslint-plugin-unused-imports
使用していないものを削除したり、足りないものを自動で追加してくれるプラグイン
yarn add -D eslint-plugin-unused-imports
設定を追加
.eslintrc.json
{
- "plugins": ["sort-keys-custom-order", "simple-import-sort", "import"],
+ "plugins": ["sort-keys-custom-order", "simple-import-sort", "import","unused-imports"],
"extends": ["next/core-web-vitals", "prettier"],
"rules": {
// For JS objects sorting
"sort-keys-custom-order/object-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
// For TS types sorting
"sort-keys-custom-order/type-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"import/first": "error",
"import/newline-after-import": "error",
"import/no-duplicates": "error",
+ "unused-imports/no-unused-imports": "error"
}
}
vscodeの設定を追加してimportすべきものがあった場合に、自動で追加してくれるようにする。
.vscode/settings.json
{
"javascript.preferences.importModuleSpecifier": "non-relative",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
+ "source.addMissingImports",
"source.fixAll.eslint"
]
}
Tailwind CSSの導入
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
globals.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
追加することで文字を1文字打つたびに補完を出してくれる。
.vscode/settings.json
{
"javascript.preferences.importModuleSpecifier": "non-relative",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
"source.addMissingImports",
"source.fixAll.eslint"
],
+ "editor.quickSuggestions": {
+ "strings": "on"
+ }
}
yarn add -D eslint-plugin-tailwindcss
tailwindcssの記述を自動で整えてくれるようになる
.eslintrc.json
{
"plugins": [
"sort-keys-custom-order",
"simple-import-sort",
"import",
"unused-imports",
+ "tailwindcss"
],
"extends": [
"next/core-web-vitals",
"prettier",
+ "plugin:tailwindcss/recommended"
],
"rules": {
// For JS objects sorting
"sort-keys-custom-order/object-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
// For TS types sorting
"sort-keys-custom-order/type-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"import/first": "error",
"import/newline-after-import": "error",
"import/no-duplicates": "error",
"unused-imports/no-unused-imports": "error"
},
+ "settings": {
+ "tailwindcss": {
+ "groupByResponsive": true,
+ "whitelist": []
+ }
+ }
}
プラグインを追加
@tailwindcss/typography
見た目をいい感じにしてくれるプラグイン
yarn add -D @tailwindcss/typography
@tailwindcss/forms
フォーム要素のスタイルを上書きして、デフォルトのフォームスタイルを提供してくれる。
yarn add -D @tailwindcss/forms
@tailwindcss/line-clamp
指定した行数でテキストを切り捨てて省略して表示することができる。
yarn add -D @tailwindcss/line-clamp
上記３つのプラグインを設定ファイルに追加
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
plugins: [
+ require("@tailwindcss/typography"),
+ require("@tailwindcss/forms"),
+ require("@tailwindcss/line-clamp"),
],
theme: {
extend: {},
},
};
Discussion