DEV Community

Kunihiko Tanaka
Kunihiko Tanaka

Posted on

2 1

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

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

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay