Next.js & TypeScript & Scss & Storybookでフロントエンドを始める

1.Next.jsで始める

(1)
npm init next-app directory-name
directory-nameは、任意の名前。

※localhost3000を変えたい場合

package.json

"script"{
- "dev":"next dev"
+ "div":"next dev -p 1000"

(2)yarn dev
localhostが立ち上がれば、おっけっけ！

2. TypeScript導入

(1)yarn add --dev typescript @types/node @types/react @types/react-dom
​
(2)pages内のjsファイルを"tsx"に変更
​
(3)一度、yarn devをCtrl/cmd + Cで終了し、再起動。
tsconfig.jsonファイルが出来きたら、おっけっけ！
​

2-1. prettierの設定　(；はいらないので消したいのと、tabの幅を2に)

(1).prettierrc　作成

.prettierrc

{ "semi": false, "trailingComma": "all", "singleQuote": true, "printWidth": 100, "tabWidth": 2 }

3. Sass 導入

(1)yarn add sass

(2)拡張子をscssに。
・pagesのimportパス
・stylesのglobalsとHome.module

4. Storybook 導入

(1)npx sb init
・stories削除
・以下変更

storybook/main.js

module.exports = {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
  ],

  webpackFinal: async (baseConfig) => {
    // scss を読み込む
    baseConfig.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1, // 1 => postcss-loader
            modules: {
              localIdentName: '[local]___[hash:base64:2]',
            },
          },
        },
        'sass-loader',
      ],
    })
    return { ...baseConfig }
  },
}

(2)@zeit/next-sass インストール

yarn add @zeit/next-sass node-sass

(3)CSS Modulesにする
next.config.js作成

next.config.js

const withSass = require('@zeit/next-sass');
module.exports = withSass({
	cssModules: true,
});

(4).storybook内追加・変更

preview-body.html

<style>
  body {
    padding: 0;
    margin: 0;
  }
</style>
<link rel="stylesheet" href="styles/globals.scss" />

.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  layout: 'fullscreen',
}

(5)画像を表示できるようにする

package.json

"scripts": {
-"storybook": "start-storybook -p 6006",
+"storybook": "start-storybook -s ./public -p 6006",
}

(6)yarn storybook
で立ち上がるはず！

5. おわり！

あとは、Githubで、リポジトリを作成して、案内通りに
git init
git add -A
git commit -m "first commit"
git branch -M main
git remote add origin url
git push -u origin main

これで自分的には再現可能。