Next.jsのApp Routerを使ってみる

nodenv install 18.16.0

18.16.0

npx create-next-app@latest

npm i -g yarn

yarn

yarn add -D eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-unused-imports prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

{
  "extends": [
    "next/core-web-vitals", // デフォルト設定
    "eslint:recommended", // eslint推奨ルール設定
    "plugin:@typescript-eslint/recommended", // typescript-eslintの推奨ルール設定
    "plugin:storybook/recommended", // storybook関連設定
    "prettier" // Prettierとの競合ルールをOFFにする（他の設定を上書きするため、最終行に記述する必要有り）
  ],
  "plugins": [
    "simple-import-sort", // import文の自動整列を実現
    "import", // 上記プラグインを拡張（自動整列のルールを追加）
    "unused-imports" // 未使用のimport文を削除
  ],
  "rules": {
    "simple-import-sort/imports": "error", // importのsortルールを設定
    "simple-import-sort/exports": "error", // exportのsortルールを設定
    "import/first": "error", // すべてのimportがファイルの先頭にあることを確認
    "import/newline-after-import": "error", // import後に改行があることを確認
    "import/no-duplicates": "error", // 同じファイルのimportをマージ
    "unused-imports/no-unused-imports": "error" // 未使用のimport文を削除
  }
}

module.exports = {
  printWidth: 80, // 1行で表示する文字数
  tabWidth: 2, // インデントのサイズ
  useTabs: false, // インデントにスペースの代わりにタブを使うかどうか
  semi: true, // 文の後にセミコロンを付けるかどうか
  singleQuote: false, // 文字列をシングルクォートで囲むかどうか（falseだとダブルクォート）
  quoteProps: "as-needed", // オブジェクトのプロパティ名をクォートで囲むかどうか
  jsxSingleQuote: false, // JSX内のクォートをシングルクォートで囲むかどうか
  trailingComma: "es5", // 複数行のときの末尾のカンマを付けるかどうか
  bracketSpacing: true, // オブジェクトリテラルの{}内の前後にスペースを入れるかどうか
  bracketSameLine: false, // JSX内の要素の閉じタグを最後の行に含んで表示するか
  arrowParens: "always", // アロー関数の引数が１つのときにカッコで囲むかどうか
};

yarn add -D stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-prettier stylelint-scss

module.exports = {
  plugin: ["stylelint-scss"],
  extends: [
    "stylelint-config-recommended-scss", // scssのための拡張ルール追加
    "stylelint-config-recess-order", // cssプロパティの自動ソートを設定
    "stylelint-config-prettier", // Prettierとの競合ルールをOFFにする
  ],
  rules: {
    "scss/at-rule-no-unknown": [
      true,
      {
        // Tailwind CSS関連は許容する
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
  },
};

{
  // 導入推奨プラグイン一覧
  "recommendations": [
    // esLintの保存時自動フォーマットを有効
    "dbaeumer.vscode-eslint",
    // styleLintの保存時自動フォーマットを有効
    "stylelint.vscode-stylelint",
    // prettierの保存時自動フォーマットを有効
    "esbenp.prettier-vscode",
    // cssModulesのクラス名補完を有効
    "clinyong.vscode-css-modules",
    // css変数の補完を有効
    "vunguyentuan.vscode-css-variables",
    // cssクラス名の補完を有効
    "gencer.html-slim-scss-css-class-completion"
  ]
}

{
  // ファイル保存時のフォーマット処理を有効化する
  "editor.formatOnSave": true,

  // 各ファイルのフォーマッターを指定する
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Stylelintの対象を設定
  "stylelint.validate": ["css", "scss"],

  // ESLintの対象を設定
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // 保存時に実行される各コードアクションを有効化する
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  },

  // VSCodeデフォルトのLintを無効にする（各Lintのルールで統一する際に設定）
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "javascript.format.enable": false,
  "typescript.format.enable": false
}

npx storybook@latest init

yarn add -D sass @storybook/addon-styling

import path from "path";
import type { StorybookConfig } from "@storybook/nextjs";

const rootPath = path.resolve(__dirname, "../src/");

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        sass: {
+          // Require your Sass preprocessor here
+          implementation: require("sass"),
+        },
+      },
+    },
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
+  staticDirs: ["../public"],
+  webpackFinal: async (config: any) => {
+    config.resolve.alias["@"] = rootPath; // srcを@と省略してパスを記載できるように設定
+    return config;
+  },
};
export default config;