NextJS で Route.push() が動作しない問題

各種バージョン

"react": "^16.10.2",
"next": "^9.1.1",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",

背景

Issue

こんな問題にぶつかった。

要するに next/router の提供する Router を用いた通常画面遷移ができないと言うもの。

Issueでも書いたように

Router.push('/'); // not work
// Router.push({ pathname: '/' }); // not work
// router.push({ pathname: '/foo' }); // go to 404 page
// window.location.assign('/'); // work
// Router.push('/error', '/'); // work

と言う状態になる。
重要なのはこれがIssueに書いたような tokenを用いた処理でなくても生じる と言うこと。

どうやら、 next-css を 使うときに生じるらしい。

解決策

• 全てのファイルに stylesheet を設置する
• pages/_app.tsx に stylesheet を設置する

筆者は2つ目の方法で暫定的解決をした。

具体的には以下のようだ。

_app.tsx

import * as React from 'react';

// {... import some modules}

/**
 * must import stylesheet here for some reason
 * [issue](https://github.com/zeit/next.js/issues/9335)
 */
import '../styles/style.scss';

考察

Nextが未だに持つ問題の1つで、暫定的対策として上記の解決策をする必要がありそう。
Issue