Next.jsにtypescriptでstorybook,カスタムサーバーを使えるようにする

記事の概要

Next.jsを使うときに毎回設定ファイルを調べるのが面倒だったのでまとめました。

Typescriptを使えるようにする

packageをインストールし、tsconfig.jsonを作成する
tsconfig.jsonは何も書かなくとも勝手にNext.jsが書いてくれます。

 yarn add -D typescript node @types/node @types/react @types/react-dom

 touch tsconfig.json

Sassを使えるようにする

 yarn add -D sass

index.module.scss

.sample {
  color: red;
}

あとはcssモジュールと同様にimportして使えます。

Storybookを使えるようにする

 yarn add -D sass-loader css-loader @storybook/addon-essentials @storybook/addon-links @storybook/react

 mkdir .storybook
 touch .storybook/main.js .storybook/preview.js

package.jsonに以下を追加します。

package.json

  "scripts": {
  
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }

main.js

module.exports = {
    stories: ['../src/components/**/**/*.stories.@(ts|tsx|js|jsx|mdx)'], //storiesファイルの場所
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-typescript'],
    webpackFinal: async (baseConfig) => {
        baseConfig.module.rules.push({
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        modules: {
                            localIdentName: '[local]___[hash:base64:2]',
                        },
                    },
                },
                'sass-loader',
            ],
        });
        return {...baseConfig};
    }
}

 yarn storybook

カスタムサーバーを使えるようにする

今回はExpressを使います。

 yarn add -D ts-node express @types/express
 touch tsconfig.server.json

tsconfig.server.json

{
  "extends": "./tsconfig.json", 
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "noEmit": false
  },
  "include": ["server"]
}

serverディレクトリを作成し、その中にindex.tsを作成

index.ts

import express, { Request, Response } from "express";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const port = process.env.PORT || 3000;

async function main() {
    try {
        await app.prepare();
        const server = express();
        server.all("*", (req: Request, res: Response) => {
            return handle(req, res);
        });
        server.listen(port, (err?: any) => {
            if (err) throw err;
            console.log(`Ready on localhost:${port}`);
        });
    } catch (e) {
        console.error(e);
        process.exit(1);
    }
}

main();

package.jsonを以下を追加します。

package.json

 "scripts": {
    "dev": "ts-node --project tsconfig.server.json src/server/index.ts",
    "start": "tsc --project tsconfig.server.json && NODE_ENV=production node dist/index.js",
  }

終わりに

2021年1月26日に書いたものなので今後、パッケージのバージョンが噛み合わなくなる可能性があります。