🦍

Next.js + TypeScript + Mantine +Tailwind CSSを導入する時のセットアップ

2022/09/01に公開

Next.js

こんにちは。
フロントエンドエンジニア志望のしゅーへいです。

学習して5ヶ月目になるのですが、Mantineで環境構築をすることが多くなってきたので、
自分のメモ用にNext.js + TypeScript + Mantine +Tailwind CSS + ESlint + Prettierでの環境構築を記していこうと思います。

環境構築で時間食われるのなんていやですからね。
ここでエラーなんてでたら、エラーよ駆逐してやるー！！
ってなりますからね。

では早速やっていきましょう。
今回は、yarnで行っていきます。

なぜ筆者はyarnなのか

yarnで行う理由
1. バージョン管理がしやすいから(このメリットが大きい)
2. npm方式で導入して、yarn.lockが入ったとき、「あれ？yarn入れたっけとなる」←これは正直どうでもいいw

バージョン管理がしやすいからが1番のメリットです。

ターミナル

$ yarn upgrade-interactive

このコードで適切なバージョンにアップしてくれる。
中にはバージョンをReact-v18に上げたことによって起動できないものもあるので、
その場合は下げる必要がある。

Next.js + TypeScriptの導入

ターミナル

yarn create next-app --typescript

ターミナル

uccess Installed "create-next-app@12.2.5" with binaries:
      - create-next-app
? What is your project named?

と出るので、フォルダ名を記載する。

ターミナル

cd フォルダ名

これで、フォルダ名を選択した状態にする。

ターミナル

yarn dev

これで立ち上げて、Welcome to Next.js!
が出てくればOKです。

ターミナル

code .

これでVSCodeを開きます。

ここからは、VSCode内のターミナルを利用しています。

[参照]Next.jsセットアップドキュメント
https://nextjs.org/docs/getting-started

Tailwind CSSを導入する

ターミナル

$ yarn add -D tailwindcss postcss autoprefixer postcss-nested

ターミナル

$ yarn tailwindcss init -p

tailwind,config.js

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content内にpages/
components/ を記載する。

globals.css

@tailwind components;
@tailwind utilities;

※公式ドキュメントには、＠tailwind base;がありますが、これを入れないことによってMantineの干渉を防ぐことができます。

ターミナル

yarn dev

これでTailwind CSSを導入することが可能です。

[参照]

Mantineの導入

ターミナル

yarn add @mantine/core @mantine/hooks @mantine/form @mantine/next @emotion/server @emotion/react

基本は、@mantine/hooksと、@mantine/coreで済むのでこの2つだけ導入しておいて、
あとは用途によって加えるだけでいいと思っています。

pageフォルダ内に、「_document.tsx」ファイルを作成します

pages/_document.tsx

import { createGetInitialProps } from '@mantine/next';
import Document, { Head, Html, Main, NextScript } from 'next/document';

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
  static getInitialProps = getInitialProps;

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

pages/_app.tsx

import { AppProps } from 'next/app';
import Head from 'next/head';
import { MantineProvider } from '@mantine/core';

export default function App(props: AppProps) {
  const { Component, pageProps } = props;

  return (
    <>
      <Head>
        <title>Page title</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>

      <MantineProvider
        withGlobalStyles
        withNormalizeCSS
        theme={{
          /** Put your mantine theme override here */
          colorScheme: 'light',
        }}
      >
        <Component {...pageProps} />
      </MantineProvider>
    </>
  );
}

お疲れ様でした。
これでMantineの導入をすることができました。

ESlint と Prettierの導入

EslintとPrettierはこの初期段階で本当に入れておきたい。

そうでないと、buildしないとエラーに気付けないし、
Prettier入れないと、毎度のことコード生成にイライラするので、ここで入れておきましょう。

正直ESlintに関しては、筆者はまだまだ自信がないので、参考URL載せておきます。
とはいえ使ってきた中でめっちゃいいなと思ってるのがあるので、紹介しますね。
もっといい方法があったら、ぜひ教えてください。

ターミナル

yarn add --dev eslint
yarn run eslint --init

色々CLIの中で聞かれると思うが、
こちらを参考にしてみてほしい。

.eslintrc.json

  {
  "root": true,
  "env": {
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "off"
  },
  "ignorePatterns": ["/node_modules/", "/dist/"]
}

Eslintはこれでおわり。

次にプロジェクトフォルダ内に「.prettierrc」ファイルを作成

.prettierrc

{
  "singleQuote": true,
  "useTabs": true,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "printWidth": 80,
  "trailingComma": "none"
}

「.vscode」フォルダを作成
「.vscode」フォルダ内に「setting.json」ファイルを作成

.vscode/setting,json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

これで自動整形をしてくれるようになります。

これで完了です。
まだまだEslintが完全なのか？と思うところではありますが、
いま出せる最大のセットアップです。

次はMantineの実装方法に関してお伝えしようと思います。

ここまで読んでくださってありがとうございました。
ではまたっ！！

なぜ筆者はyarnなのか

Next.js + TypeScriptの導入

Tailwind CSSを導入する

Mantineの導入

ESlint と Prettierの導入

Discussion