memo next

Next.js + Typescript プロジェクトを作るときに、とりあえずやっていること

Keita Imatomi
2021-4-18 11:06

最近は Next.js + Typescript で開発することがほとんどです。いくつか作ってると、効率化のためにお決まりの型ができてくるのでメモっておきます。あらかじめ基本形を作って持っておくと作業がスムーズに開始できますが、界隈の変化は速いので、都度情報を更新しつつが大事です。

ディレクトリ構成

プロジェクトはcreate-next-appで作成したものをベースに以下のように構成している。

  • .github/workflows/*.yml (GitHubActions でのCI/CD)
  • public/ (パブリックデータ)
    • favicon.ico
    • ogp.png
  • server/(必要なら)
  • src/(開発ソース)
    • assets/ (アセット置き場)
      • fonts/
      • icons/
      • logos/
      • stylesheets/ (グローバルスタイル用)
        • modules/
        • partials/
          • _general.scss
          • _mixins.scss
          • _reset.scss
          • _typo.scss
          • _variables.scss
        • global.scss
    • components/(コンポーネント置き場、AtomicDesign準拠)
      • atoms/
      • molecules/
      • organisms/
      • templates/
    • interfaces/(models/ とどっちがいいのだろう?)
      • index.ts (大体1つにまとめちゃう。)
    • layouts/ (基本レイアウト関連)
    • lib/ (ライブラリ置き場。処理はなるべく画面と切り離す。)
      • hooks/ (hooksはまとめちゃう。1階層上でもいい。)
      • (他は作りながら適宜にカテゴリ分けする)
    • pages/(ページ置き場、ルーティングになる)
    • storis/ (Storybook)
  • test/(テスト以下は特に決めてない)

追加モジュール

絶対パスを使用できるようにする

パスを入力するとき、@/src/にアクセスできるようになる。

  1. babel-plugin-module-resolver をインストール
$ npm i -D babel-plugin-module-resolver
  1. .babelrc に以下を追記

.babelrc

{ "presets": [ "next/babel" ], "plugins": [ [ "module-resolver", { "root": [ "." ], "alias": { "@": "./src" } } ] ] }
  1. tsconfig.json に以下を追記

.tsconfig.json

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "src/*" ] }, } }

svg を使用可能にする

  1. babel-plugin-inline-react-svg をインストールする
$ npm i -D babel-plugin-inline-react-svg
  1. .babelrc に以下を追記

.babelrc

{ "presets": [ "next/babel" ], "plugins": [ "inline-react-svg" ] }
  1. next-env.d.ts に以下を追記

.next-env.d.ts

{ declare module '*.svg' }

本番環境では console.log を削除させる

  1. babel-plugin-transform-remove-console をインストールする
$ npm i -D babel-plugin-transform-remove-console
  1. .babelrc に以下を追記

.babelrc

{ "presets": ["next/babel"], "env": { "production": { "plugins": ["transform-remove-console"] } } }

Sass をサポートする

  1. sassをインストールする。
$ npm install sass

データフェッチ

必ずじゃないけど、ほぼ入れる。

$ npm install ky swr

Form

必ずじゃないけど、ほぼ入れる。

$ npm install react-hook-form

Transition

必ずじゃないけど、ほぼ入れる。CSSアニメーション後にアンマウントしたり、処理を走らせたいときはザラにあるので。

$ npm install react-transition-group --save

Storybook

長くなってきたので別ノートに切り分けました。 > Next.js に Storybook を導入する。

その他

  • Linter や Formatterの設定 (こだわりないので、他のエンジニアさんに合わせる。)
  • strict モードをオンにする。(他のエンジニアさんにわせる。)
こちらもどうぞ