Next.js 9.0 + TypeScript + redux-observable を試してstarterとして公開した

Kunihiko Tanaka — Wed, 10 Jul 2019 14:02:02 +0000

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人気に早く追いついて欲しいなー

Tried & published Next.js 9.0 + TypeScript + redux-observable starter

Kunihiko Tanaka — Wed, 10 Jul 2019 14:00:11 +0000

Next.js 9.0 has been released.
I tried it with my usual development libs (redux-observable, styled components, etc...), and I found some gotchas, so I'm writing down this.

redux-observable

Using redux-observable with Next.js, we have to put some code to /pages/_app.ts, and the style is little bit different comparing to pure react development.
There are some libraries that helps it

next-redux-wrapper
next-redux-saga But there are no next-redux-observable or something. So, eventually I wrote following code. https://github.com/kunihiko-t/nextjs9-ts-redux-observable-starter/blob/master/pages/_app.tsx ## CSS import I've tried to use Semantic UI React. But when I write following line, I've got an error.

import 'semantic-ui-css/semantic.min.css'

In the Next.js world, we have to create next.config.js instead of webpack.config.js .
So I wrote css-loader settings on it. But it didn't work well.
I googled & found the information about @zeit/next-css.
But next-css was displaying error like Invalid Option, so I googled more, and I found the issue of it.
It's just workaround, but worked well.
My next.config.js is following.
https://github.com/kunihiko-t/nextjs9-ts-redux-observable-starter/blob/master/next.config.js

Styled Components

There are some errors on the browser console.
I've googled again and some articles saying use .babelrc.
So I've added .babelrc and it solved the issue.

{
"presets": ["next/babel"],
"plugins": ["styled-components"]
}

Published starter

There are no errors for now.
I felt that using Next.js is little bit different from pure react development, and it made me confusing.
So I published this article & Next.js 9.0 + TypeScript + redux-observable starter for me, and the person who is trying Next.js but struggling with errors.
But this repository is still WIP.

[ ] Use middleware or something for Authentication
[ ] Set alias for import { foo } from '~/foo'
[ ] Remove 'any' type from epic

DEV Community: Kunihiko Tanaka