Next.js 9.0 + TypeScript + redux-observable を試してstarterとして公開した
Next.js 9.0が出たので触ったら色々ハマった話
Next.js 9.0が出たので試してみたところ、色んなところでハマったのでメモとして残す。
redux-observableを導入する段階でハマる
Next.jsでreduxやredux-observableなどを使う時は pages/_app.tsに処理を書くらしく、いつもと勝手が違ってハマった。
next-redux-wrapperとかあるみたいだけど最終的には使わずにこんな感じで書いた。
CSSのimportでハマる
Semantic UI Reactを導入する際に
import 'semantic-ui-css/semantic.min.css'という感じでCSSをimportしようとするとエラーが出てハマった。
Next.jsではwebpack.config.jsで書いているような設定をnext.config.jsに書くらしかったので書いてみたもののサクッと動かなかった。
そして@zeit/next-cssというのを使えば動くという情報を見つけたので試してみたらInvalid Optionなどと言われて動かずさらに検索すると関係ありそうなissueを発見。
ただのworkaroundだけどとりあえず動くようにはなった。
next.config.jsはこんな感じになっている。
Styled Componentsでハマる
ブラウザで画面を開くとconsoleにエラー出ていたので調べたら.babelrcに
{
"presets": ["next/babel"],
"plugins": ["styled-components"]
}このあたりを追記したら良いとの情報を得て追記したら解決した。
開発開始できそうな感じになったので公開した
これでとりあえずエラーも消えて動くようになり開発を始めれそうな状態にはなった。
Next.jsを使わなければ特に気にもならないようなことでハマって結構めんどくさかった。
今後の自分のためと、同じようにNext.js触ろうとしたけど普段通りにいかず面倒くさくて投げた人のためにyarn devですぐ開発を始めれるものを残しておいた。
https://github.com/kunihiko-t/nextjs9-ts-redux-observable-starter
Aliasの設定はまだ上手くいっていないし、認証周りもちゃんとできてないのでもうちょっと色々調べる必要がありそう。
Next.js 9は結構いい感じっぽいのでNuxt.js人気に早く追いついて欲しいなー
