Open3ヶ月前にコメント追加5

Next.js(ver15)でボイラーテンプレートを作成してみる

からくれ178

作りたいボイラーテンプレート環境は以下である。

typescript使用
ESLint使用
StyleLint使用
SCSS使用
Prettier使用
srcフォルダ配下に開発環境がある
App Routerを使う
エイリアスを使う
このうち、ESLint、TypeScript、srcフォルダ、App Router、エイリアスは初期コマンドから一発で作成可能である。

npx create-next-app@latest

からくれ178

Prettier・ESLint・StyleLintを入れてVSCode上で自動フォーマットをかけれるようにする

prettierを導入する。

npm i -D prettier eslint-config-prettier

eslint.config.mjsに以下を追記する。

import eslintConfigPrettier from "eslint-config-prettier";

// 省略

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {   // 追加
    name: "prettier/config", // 追加
    ...eslintConfigPrettier // 追加
  }
];

SCSSをインストールする。

npm i -D sass

StyleLintを導入する。

npm i -D stylelint stylelint-prettier stylelint-config-recess-order stylelint-config-recommended-scss

style.config.mjsに以下を追加する。

/** @type {import('stylelint').Config} */
const config = {
    extends: [
        "stylelint-config-recommended-scss",
        "stylelint-config-recess-order",
    ],
    rules: {
        "keyframes-name-pattern": null,
        "scss/at-function-pattern": null,
        "scss/at-mixin-pattern": null,
        "scss/dollar-variable-pattern": null,
        "scss/percent-placeholder-pattern": null,
        "scss/selector-no-union-class-name": true,
        "selector-class-pattern": null,
        "selector-id-pattern": null,
        "function-name-case": null,
        "selector-pseudo-class-no-unknown": [
            true,
            {
                ignorePseudoClasses: ["global"],
            },
        ],
    },
    ignoreFiles: ["dist/**", "**/node_modules/**"],
};

export default config;

vscodeのsettings.jsonに以下を追記する。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
 "[css][scss]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit"
    }
  },
  "stylelint.validate": ["css", "scss"],
  "css.validate": false,
  "scss.validate": false,
}

参考リンク

からくれ178

SCSS上でエイリアスを効かせられるようにする

例えば/src/assets/scss/global.scssを読み込ませたいときは、next.config.mjsに以下のように記載する。

  sassOptions: {
    // ファイルパスを記載
    additionalData: `@use "src/assets/scss/global" as *;`,
    silenceDeprecations: ['legacy-js-api'],
  },

からくれ178

layout.tsxにスタイルを当てる

共通させたいスタイルをlayout.tsxに当てる。例えばdestyle.cssやswiperのスタイルなどである。
destyle.cssをインストールする。

npm i -D destyle.css

以下はlayout.tsxのインポート例である。

import "destyle.css";
import { Noto_Sans_JP, Jost } from "next/font/google";
import "@/assets/scss/base.scss";
import "swiper/css";

からくれ178

出来上がったテンプレートがこちら。