Next.js + Typescript + Atom editorで開発するための設定

2018-11-21 #typescript  #nextjs  #atom 

やりたいこと

  • Next.js(v7) + Typescript の開発を Atom エディタで
  • import を相対パスではなくエイリアスでやる。もちろん定義ジャンプしたい

かなりミニマムな設定なので開発が進むと足りない部分が出てくるかもしれない。

設定のポイント

参考リポジトリ https://github.com/seihmd/nextjs-typescript-example

以下、設定のポイントをかいつまんで挙げていく。

next-typescript プラグイン

ひとまず Next.js 謹製の Typescript プラグインを入れる。
.babelrc、tsconfig.json、next.config.js については README の通りで OK
https://github.com/zeit/next-plugins/tree/master/packages/next-typescript

import をエイリアスで行うための設定

babel-plugin-module-resolver の導入

これを install して、
https://github.com/tleunen/babel-plugin-module-resolver

.babelrc に設定を追加する。
エイリアス名先頭の@は本来不要でなくてもビルドは問題なくできる。が、なぜか Atom エディタが”Cannot find module”エラーを吐くのでつけている。

"plugins": [
  [
    "module-resolver",
    {
      "root": ["./src"],
      "alias": {
        "@components": "./src/components"
      }
    }
  ]
]

tsconfig の設定

tsconfig.json に同じエイリアスを追加する。冗長なのが辛いがエディタが”Cannot find module”エラーを吐くのでしょうがない。

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

Atom の設定

autocomplete-modules プラグインをインストールして設定の”Babel Plugin Module Resolver support”にチェックをつける。その後一度エディタをリロードしたほうがいいかもしれない。

以上の設定でエイリアスによる import および、Atom エディタ上での定義ジャンプができるようになっているはず。

import Head from '@components/Head';
import Message from '@components/Message';

export default () => (
  <div>
    <Head />
    <Message />
  </div>
);

styled-jsx のための設定

jsx 中の style タグに”jsx”プロパティを書くと Typescript のエラーが出る。

Property ‘jsx’ does not exist on type ‘DetailedHTMLProps, HTMLStyleElement>‘.

それを防ぐために types.d.ts ファイルに以下の記述を行っている。

import 'react';

declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

参考 URL