見つけ次第追記してゆく。<div class=n-md_h3-box><a href=#使われているサイト+Color_-_Cloudflare_Design aria-label="Color - Cloudflare Designのアンカー" class=n-md_h3-anchor></a><h3 id=使われているサイト+Color_-_Cloudflare_Design class=n-md_h3-heading>Color - Cloudflare Design</h3></div><a href=https://gyazo.com/f28834f3860241fcef1d76513b450ad3><div data-tag=img data-src=https://i.gyazo.com/f28834f3860241fcef1d76513b450ad3.png alt=null style="min-height: 30em"></div></a><a href=https://cloudflare.design/color/ >Color - Cloudflare Design</a>ざっくりとしたUIを見ながら色を決めれます。<div class=n-md_h3-box><a href=#使われているサイト+Expo aria-label=Expoのアンカー class=n-md_h3-anchor></a><h3 id=使われているサイト+Expo class=n-md_h3-heading>Expo</h3></div><a href=https://gyazo.com/3fa383eebb63784e4d092f171cef2ce6><div data-tag=img data-src=https://i.gyazo.com/3fa383eebb63784e4d092f171cef2ce6.png alt=null style="min-height: 30em"></div></a><a href=https://expo.io/ >Expo</a>React Native でお世話になってます。

使われているサイト

このページは<code>next@^9</code>以降確認されておらずもう直った可能性があるうので、2020年1月6日にアーカイブ化されました。<hr><div class=n-md_h3-box><a href=#NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+環境 aria-label=環境のアンカー class=n-md_h3-anchor></a><h3 id=NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+環境 class=n-md_h3-heading>環境</h3></div><ul><li><code>next@^6.1.1</code></li></ul>(2019-01-13)<code>next@^7</code>にしたら治ったかもしれない…？ (2019-11)そういえば<code>next@^9</code>辺りから見ていません。直ったかもしれない。<div class=n-md_h3-box><a href=#NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+確認した事例 aria-label=確認した事例のアンカー class=n-md_h3-anchor></a><h3 id=NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+確認した事例 class=n-md_h3-heading>確認した事例</h3></div>ブラウザバックした時に時々でる。特に最初にアクセスしたページに移動する時は9割ぐらい起きてると思う。 ログはこんな感じ。<pre><code class=language-bash>router.js:533 Uncaught (in promise) TypeError: Cannot read property 'split' of undefined
 at Router.onlyAHashChange (router.js:533)
 at Router._callee2$ (router.js:269)
 at tryCatch (runtime.js:62)
 ...</code></pre>該当箇所のコードはこうなっている。<pre><code class=language-js> key: "onlyAHashChange",
 // どうやらここで渡ってきている`as`が`undefined`なせいで、
 // その先の`as.split`の呼び出しで起きてる模様
 value: function onlyAHashChange(as) 
 // 略

 var _as$split = as.split('#'),
 _as$split2 = (0, _slicedToArray2.default)(_as$split, 2),
 newUrlNoHash = _as$split2[0],
 newHash = _as$split2[1]; // Makes sure we scroll to the provided hash if the url/hash are the same</code></pre><div class=n-md_h3-box><a href=#NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+色々調べたがさっぱり分からないので応急処置 aria-label=色々調べたがさっぱり分からないので応急処置のアンカー class=n-md_h3-anchor></a><h3 id=NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+色々調べたがさっぱり分からないので応急処置 class=n-md_h3-heading>色々調べたがさっぱり分からないので応急処置</h3></div>応急処置というのは、上の<code>as</code>は<code>next/router</code>の<code>Router.beforePopState</code>で見ることができるので、もし<code>undefined</code>だったらJavaScriptでページ再読込するというものです。SPAなのにリロードさせちゃうし正直微妙ですが、何も起きないよりはマシです。どこか<code>_app.jsx</code>やネストの浅い所コンポーネントの<code>componentDidMount</code>かどこかで以下のように書きます。<pre><code class=language-js>Router.beforePopState(({as}) =&gt; {
 if (as === undefined) {
 window.location.href = '/';
 return false;
 }

 return true;
});</code></pre>うーん、誰か直せた人いたら教えてくださいー；<div class=n-md_h3-box><a href=#NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+更新(2018-09-01) aria-label=更新(2018-09-01)のアンカー class=n-md_h3-anchor></a><h3 id=NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する+更新(2018-09-01) class=n-md_h3-heading>更新(2018-09-01)</h3></div><code>as</code>が<code>undefined</code>だったらページを更新せずにURLだけ<code>/</code>に書き換え。<pre><code class=language-js>Router.beforePopState(({as}) =&gt; {
 if (as === undefined) {
 Router.push('/', '/', { shallow: true })
 return false;
 }

 return true;
});</code></pre>

NextJSでブラウザバック時にエラーでページ移動しない時があるので応急処置する

NodeJS のプロジェクトを作りたいので、<code>package.json</code>がまだの場合は<code>yarn init -y</code>で<code>package.json</code>を作っておきます。<div class=n-md_h3-box><a href=#５分で_Hello_from_NextJS+依存インストール aria-label=依存インストールのアンカー class=n-md_h3-anchor></a><h3 id=５分で_Hello_from_NextJS+依存インストール class=n-md_h3-heading>依存インストール</h3></div>次に<code>next</code>をインストールします。<code>next</code>は<code>react</code>と<code>react-dom</code>が共にインストールされていることを期待しているのでその２つもインストールします。<pre><code class=language-sh>yarn add next react react-dom
</code></pre><div class=n-md_h3-box><a href=#５分で_Hello_from_NextJS+設定ファイル作成 aria-label=設定ファイル作成のアンカー class=n-md_h3-anchor></a><h3 id=５分で_Hello_from_NextJS+設定ファイル作成 class=n-md_h3-heading>設定ファイル作成</h3></div>🎉<code>next@^9</code>からこのファイルは作成しなくても良くなりました。<details><summary>2019年10月以前の内容</summary><code>next.config.js</code>というファイルを作ります。とはいっても今はただ<code>&quot;Hello from NextJS&quot;</code>と表示させたいだけなので設定内容はただの空オブジェクトです。~~<pre><code class=language-js>// next.config.js
module.exports = {};
</code></pre></details><div class=n-md_h3-box><a href=#５分で_Hello_from_NextJS+ページ作成 aria-label=ページ作成のアンカー class=n-md_h3-anchor></a><h3 id=５分で_Hello_from_NextJS+ページ作成 class=n-md_h3-heading>ページ作成</h3></div>NextJS では<code>src/pages</code>ディレクトリに実際のページとなるファイルを作成していきます。<code>src/pages/index.jsx</code>が<code>index.html</code>というような意味になるのでこのファイルを作成しましょう。<pre><code class=language-jsx>// /pages/index.jsx
export default () =&gt; &lt;h1&gt;Hello from NextJS&lt;/h1&gt;
</code></pre>ES で書かれていますが、 NextJS は逆に ES でしか書くことができないのでこれで大丈夫です。<div class=n-md_h3-box><a href=#５分で_Hello_from_NextJS+ページ確認 aria-label=ページ確認のアンカー class=n-md_h3-anchor></a><h3 id=５分で_Hello_from_NextJS+ページ確認 class=n-md_h3-heading>ページ確認</h3></div><code>./node_modules/.bin/next dev -p 3333</code>と実行しましょう。サーバーが立ち上がり、<code>localhost:3333</code>へアクセスして<code>&quot;Hello from NextJS&quot;</code>と表示されれば大丈夫です。この結果の<a href=https://github.com/nju33/sandbox-next>リポジトリ</a>です。

3分で NextJS をデプロイして「 Hello from NextJS 」

５分で Hello from NextJS

<code>public/</code>ディレクトリへ静的なファイルを置くとそれがそのまま配信されます。例えば<code>public/foo.png</code>のようなファイルを置いたとすると、<code>/foo.png</code>でアクセスできるようになります。これは必ず<code>public/</code>でなければなりません。<code>src/public</code>では配信されないので注意しましょう。<pre><code class=language-txt>.
├── public
│ └── cats.jpeg
└── src
 └── pages
 └── index.js
</code></pre>また<code>next@&lt;9</code>（バージョンが9より小さい）頃は、これは<code>static/</code>ディレクトリの役割でした。この2つの違いは<code>static/</code>では<code>/static/foo.png</code>のようなファイルにアクセスするには<code>/static/foo.png</code>とそのまま書かなければなりませんでした。

静的ファイルを配信する

<code>pages/</code>以下に置いたファイルは規則によって自動的にルーティング設定されます。例えば、<ul><li><code>pages/index.js</code>は<code>/</code></li><li><code>pages/products/index.js</code>は<code>/products</code></li><li><code>pages/products/related.jsは</code>/products/related`</li></ul>のような感じです。見ての通りファイル構造そのままでルート設定されます。また<code>index.*</code>な時はディレクトリ名がそのファイルのルートになります。<div class=n-md_h3-box><a href=#ルート+クエリ付きツート aria-label=クエリ付きツートのアンカー class=n-md_h3-anchor></a><h3 id=ルート+クエリ付きツート class=n-md_h3-heading>クエリ付きツート</h3></div><code>[ ]</code>で囲んだファイル名・ディレクトリ名（例えば<code>pages/products/[productId].js</code>）にすると、対象のファイルは動的に内容を切り替えられるようになります。その仕組は<code>pages/</code>からの絶対パスの中で<code>[ ]</code>で囲まれた部分はすべて<code>getInitialProps</code>の<code>query</code>プロパティに格納されて来るからです。例えば<code>pages/products/[productId]/[productColor].js</code>のようなページの場合、<pre><code class=language-json>{
 productId: 123,
 productColor: 'orange'
}
</code></pre>のようなクエリオブジェクトを動的に取得できるので、これを使って結果ページを切り替えることができます。

ルート

🎉<code>nexts@^9.1</code>(2019-11)からデフォルトで<code>pages/</code>の代わりに<code>src/pages/</code>ディレクトリでも大丈夫なようになりました。<a href=https://nextjs.org/blog/next-9-1#src-directory-support>#</a>よって以下の内容は古くなりました。<code>next</code>コマンドの引数の最後は<code>dir</code>です。これはデフォルトでは<code>.</code>が使われて、これで<code>./pages</code>がページとして処理される形になっています。 なので<code>src/pages</code>に変更したい場合は、このように実行するだけです。<pre><code class=language-sh>next src
next build src
next export src</code></pre>他のコマンドでも同じように<code>src</code>指定が必要です。ちなみに<code>next.config.js</code>の<code>dir</code>を設定でいいのではと思うかもしれませんが、これを書いてる時点の<code>next@^8.0.3</code>では何故か効きません。<blockquote>dir (string) where the Next project is located - default &#39;.&#39;</blockquote>らしいですが。。

対象になる pages/ ディレクトリを変更（ソースディレクトリの変更）

<a href=https://www.npmjs.com/package/react-transition-group><code>react-transition-group</code></a>を<code>_app.jsx</code>の中で使います。<code>_app</code>ファイルで定義したコンポーネントはクライアント側で唯一マウントし続けるコンポーネントで、このコンポーネントが受け取るプロパティの<code>Component</code>に対象の<code>pages/*.jsx</code>ファイルのコンポーネントが入る形で来ます。以下にフェードイン・アウトを想定した例です。( TypeScript ) <code>router.route</code>を<code>CSSTransition</code>の<code>key</code>として使っています。これはページ移動した時に<code>router.route</code>が切り替わり、古い<code>key</code>のものは<code>exit</code>に向かい、新しい<code>key</code>のページコンポーネントは<code>enter</code>に向かうような形になります。<code>Component</code>は1つしかないはずですが、<code>TransitionGroup</code>を使うことでアニメーション動作中に限りそれら新古のページコンポーネントを共存させられます。アニメーション中は<code>TransitionGroup</code>が生かしてくれる為です。<pre><code class=language-jsx>export default class extends App {
 addEventListener = (node: HTMLElement, done: () =&gt; void) =&gt; {
 const handle = () =&gt; {
 node.removeEventListener('transitionend', handle);
 done();
 };

 node.addEventListener('transitionend', handle);
 };

 render() {
 const {Component, pageProps, router} = this.props;

 return (
 &lt;Container&gt;
 &lt;Provider store={store}&gt;
 &lt;Fade&gt;
 &lt;TransitionGroup&gt;
 &lt;CSSTransition
 key={router.route}
 classNames="fade"
 timeout={1500}
 addEndListener={this.addEventListener}
 &gt;
 &lt;Component {...pageProps} /&gt;
 &lt;/CSSTransition&gt;
 &lt;/TransitionGroup&gt;
 &lt;/Fade&gt;
 &lt;/Provider&gt;
 &lt;/Container&gt;
 );
 }
}</code></pre>ちなみに<code>Fade</code>は<code>styled-components</code>になります。これで<code>.fade-&lt;suffix&gt;</code>クラス名を使いアニメーションを実装します。<pre><code class=language-jsx>import styled from 'styled-components';

const Fade = styled.div`
 .fade-enter {}
 .fade-enter-active {}
 .fade-enter-done {}

 .fade-exit {}
 .fade-exit-active {}
 .fade-exit-done {}
`;</code></pre>

ページ間移動時のアニメーションを実装

NextJS のドキュメントを見ると以下のように使われている例が載っています。この<code>as</code>が何に使われているのかです。<pre><code class=language-jsx>&lt;Link href="/post?slug=something" as="/post/something"&gt;</code></pre><div class=n-md_h3-box><a href=#Link_(next/link)_の_as_属性は何なのか+href_と_asの違い aria-label="href と asの違いのアンカー" class=n-md_h3-anchor></a><h3 id=Link_(next/link)_の_as_属性は何なのか+href_と_asの違い class=n-md_h3-heading>href と asの違い</h3></div><h4 id=href>href</h4><code>href</code>に設定する値は NextJS が見る URL です。 NextJS では <code>/pages</code> 以下にページファイルを作っていきます。例えば <code>/foo</code> という URL にページを作りたいなら<code>/pages/foo.jsx</code>というファイルを作り、<code>Link</code>の<code>href</code>属性には<code>/foo</code>を設定すればいいです。<h4 id=as>as</h4><code>as</code>はブラウザが見る URL です。 例えば、<code>nantoka.com/hoge/</code>以下で NextJS で作ったサイトを公開したい場合、<code>&lt;Link href=&quot;/foo&quot; /&gt;</code>では<code>nantoka.com/foo/</code>にページ遷移してしまい、リロードすると NextJS 外の URL なので正常にサイトを表示できなくなってしまいます。 そのような場合に<code>as</code>属性に<code>/hoge/foo</code>と指定してあげることで、ブラウザの URL は <code>nantoka.com/hoge/foo</code>としながら、表示するページは<code>/foo</code>(<code>/pages/foo</code>)とすることができます。

Link (next/link) の as 属性は何なのか

Styled JSX を TypeScript と共に使うには<code>&lt;style&gt;</code>タグの属性タイプに<code>jsx</code>と<code>global</code>を追加する作業から始めなければならないかもしれません。それは以下でできます。<pre><code class=language-ts> import * as React from 'react';

 declare module 'react' {
 interface StyleHTMLAttributes&lt;T&gt; extends React.HTMLAttributes&lt;T&gt; {
 jsx?: boolean;
 global?: boolean;
 }
 }</code></pre>jsx での<code>&lt;style&gt;</code>の属性は<code>React.StyyleHTMLAttributes</code>によって定義されている為、そこへ TypeScript の同 Interface 名のプロパティ型はマージされる機能を使い、追記しています。

Styled JSX と TypeScript

例えばこのサイトだと<code>IntersectionObserver</code>を使っていて、これはスマホなどでまだ対応しておらず見れないことが多いので含めています。<div class=n-md_h3-box><a href=#Polyfil_ファイルを_Webpack_の_entry_に含める+なぜ_Webpack_の_entry_に含めたいのか aria-label="なぜ Webpack の entry に含めたいのかのアンカー" class=n-md_h3-anchor></a><h3 id=Polyfil_ファイルを_Webpack_の_entry_に含める+なぜ_Webpack_の_entry_に含めたいのか class=n-md_h3-heading>なぜ Webpack の entry に含めたいのか</h3></div><h4 id="<code>&lt;script&gt;</code>での読み込みは Lighthouse のスコアを下げる"><code>&lt;script&gt;</code>での読み込みは Lighthouse のスコアを下げる</h4>HTMLで以下の Polyfil を読み込むことで、<code>IntersectionObserver</code>を対応していないサイトでも使えるようにできます。<pre><code class=language-html>&lt;script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"&gt;&lt;/script&gt;</code></pre>しかしこれは、<a href=https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains>Minimize Critical Requests Depth</a>として引っかかってしまいます。<a href=https://gyazo.com/72f42c2fc8b291df556f7476a7664f37><div data-tag=img data-src=https://i.gyazo.com/72f42c2fc8b291df556f7476a7664f37.png alt=null style="min-height: 30em"></div></a><h4 id="NextJS の entry ファイルのルートで Polyfil を読み込む">NextJS の entry ファイルのルートで Polyfil を読み込む</h4>上のnpm版である、<a href=https://www.npmjs.com/package/intersection-observer>intersection-observer</a>を使います。Polyfil は基本エントリーの最初に読み込むファイルの先頭に<code>import</code>を記載すれば使えるので、<code>_app.[jt]sx?</code>をその形にすれば使えそうです。しかし、この Polyfil は中で <code>window</code> オブジェクトへアクセスしている部分があり NextJS ではその<code>_app</code>ファイルも SSR で使われるので、 「<code>window</code>が<code>undefined</code>だよ」なエラーが起こってしまうのでこれも駄目です。<pre><code class=language-ts>// _app.tsx
import 'intersection-observer';</code></pre><h4 id="NextJS の Webpack-Config の entry に含める">NextJS の Webpack-Config の entry に含める</h4><code>next.config.js</code>から<code>webpack</code>設定を自身の設定で上書きする方法です。<code>next.config.js</code>のデフォルト<code>entry</code>は<code>() =&gt; Promise&lt;{[x: string]: string[]}&gt;</code>な形をしていて、このオブジェクトを上書きすれば良さそうです。以下は戻り値の例です。<pre><code class=language-ts>Promise {
 { 'main.js': [],
 'static/runtime/main.js':
 [ '/Users/nju33/github/blog/node_modules/next/dist/client/next-dev' ],
 'static/development/pages/_app.js': [ './pages/_app.tsx' ],
 'static/development/pages/_error.js':
 [ '/Users/nju33/github/blog/node_modules/next/dist/pages/_error.js' ] } }</code></pre>この<code>main.js</code>へ含めてます。<pre><code class=language-ts>{
 webpack: config =&gt; {
 const originalEntry = config.entry;
 config.entry = () =&gt; {
 return originalEntry().then(entry =&gt; {
 entry['main.js'] = 'intersection-observer';
 return entry;
 }
 }
 }
}</code></pre>ただまだこれだと、サーバーサイド用のビルドファイルにも<code>intersection-observer</code> Polyfil が含まれてしまい、上記と同じエラーが起きてしまうので、含めるのは Client 用のビルドファイルだけにする必要があります。 幸いにも、<code>next.config.js</code>の<code>webpack</code>関数は第二引数に<code>options.isServer</code>というフラグを渡してくれます。これは Client 用のビルド時には<code>false</code>になってくれるフラグです。つまり、<ul><li><code>options.isServer</code>が<code>true</code>のときは、デフォルトのままの<code>entry</code>を返す</li><li><code>false</code>のときは、<code>intersection-observer</code>を含める</li></ul>とすれば解決できそうです。<code>config.entry</code>を以下のように改良してみます。<pre><code class=language-ts>{
 webpack: (config, {isServer}) =&gt; {
 const originalEntry = config.entry;
 config.entry = () =&gt; {
 if (isServer) {
 return originalEntry;
 }

 return originalEntry().then(entry =&gt; {
 entry['main.js'] = 'intersection-observer';
 return entry;
 }
 }
 }
}</code></pre>上のように変更したところ Lighthouse のスコアがあがり、かつ<code>IntersectionObserver</code>に対応していない端末も対応することができました。

Polyfil ファイルを Webpack の entry に含める

以下では、<code>getInitialProps</code>で<code>foo: 1</code>という値で返しているので、<code>this.props.foo</code>には<code>1</code>が入ってきます。が、以下のように<code>connect</code>でバインド同じプロパティに対してバインドしてしまうと<code>connect</code>で渡した<code>mapStateToProps</code>の値で上書きされてしまい<code>foo: 9</code>になってしまいます。<pre><code class=language-js>class FooBase extends React.Component {
 static getInitialProps() {
 return {
 foo: 1
 }
 }

 render() {
 console.log(this.props.foo)
 // output: 9

 return &lt;div&gt;foo&lt;/div&gt;
 }
}

connect(() =&gt; ({foo: 9})(FooBase)</code></pre>少し考えれば当たり前な気もしますが、少しハマりました。ステート構造を見直すなどするといいかもしれません。

getInitialProps と react-redux の connect で渡す props は後者優先

<code>getInitialProps</code>スタティックメソッドは React のライフサイクルのメソッド群のようにサーバーサイドでもクライアントサイドでも呼び出されます。サーバーサイドで返した値は<code>window.__NEXT_DATA__</code>から取得できるので、クライアントサイドではここから値を取得することで通信なしでいける場合があります。<div class=n-md_h3-box><a href=#サーバーサイドでのみデータを通信して取得後、クライアントサイドでもそれを使いレンダリング+req_か_res_を使ってサーバーサイドでのみ実行される処理を書く aria-label="req か res を使ってサーバーサイドでのみ実行される処理を書くのアンカー" class=n-md_h3-anchor></a><h3 id=サーバーサイドでのみデータを通信して取得後、クライアントサイドでもそれを使いレンダリング+req_か_res_を使ってサーバーサイドでのみ実行される処理を書く class=n-md_h3-heading>req か res を使ってサーバーサイドでのみ実行される処理を書く</h3></div>（追記@2019-05-26） 以下のような判定をしなくても<code>process.browser</code>という変数が設定されていました。名前から察せれるようにサーバー側では<code>false</code>でブラウザ側では<code>true</code>になるのでこれを使ったほうが楽です。<code>next@^8.1.0</code>での確認です。<h4 id="typescript process.browser にアクセスできる型定義">typescript process.browser にアクセスできる型定義</h4><code>process</code>は<code>NodeJS.Process</code>を見ているのでこれを拡張してあげます。<pre><code class=language-ts>declare namespace NodeJS {
 interface Process {
 browser: boolean;
 }
}
</code></pre><del>というより<code>next@8</code>ぐらいから<code>getInitialProps</code>はサーバーでしか動かなくなったかもしれないので以下は不要かもしれません。</del>この<code>getInitialProps</code>に渡ってくるコンテキストの<code>req</code>と<code>res</code>というプロパティはサーバーサイドだけでしか渡ってこない値です。ですのでこれを使ってサーバーサイド判定ができます。以下は例コードです。<code>req</code>がある場合はサーバーサイドなのでデータを取得する処理を行い、ない場合（クライアントサイド）ではサーバーサイドで返した値をただ渡すことでクライアントサイドでの通信を無くしています。。<pre><code class=language-js>class extends React.Component {
 static async getInitialProps({req}) {
 let data;
 if (req) {
 data = await axios.get('https://xxx.com/xxx')
 } else {
 data = window.__NEXT_DATA__.props.pageProps.data;
 }

 return {data};
 }
}</code></pre>

サーバーサイドでのみデータを通信して取得後、クライアントサイドでもそれを使いレンダリング

<div class=n-md_h3-box><a href=#ターミナルログを非表示にする+やりたいこと aria-label=やりたいことのアンカー class=n-md_h3-anchor></a><h3 id=ターミナルログを非表示にする+やりたいこと class=n-md_h3-heading>やりたいこと</h3></div>SSR 中のログや、別の所から出したログなどが NextJS ビルとインの（リフレッシュと）ログで消されてしまうので一時的に NextJS のログを表示されないようにしたい。 ちなみにこれのこと。<pre><code class=language-bash> [DONE] Compiled successfully in 2090ms
 [WARNING] Compiled with 1 warnings</code></pre><div class=n-md_h3-box><a href=#ターミナルログを非表示にする+解決 aria-label=解決のアンカー class=n-md_h3-anchor></a><h3 id=ターミナルログを非表示にする+解決 class=n-md_h3-heading>解決</h3></div>このログは <a href=https://github.com/geowarin/friendly-errors-webpack-plugin>geowarin/friendly-errors-webpack-plugin</a> というプラグインを使って出しているので、このプラグインを取り除きます。 <code>next.config.js</code> の <code>webpack</code> で設定を以下のように変えます。<pre><code class=language-js>const path = require('path');

module.exports = {
 webpack(config, {dev}) {
 if (dev) {
 config.plugins = config.plugins.filter(
 plugin =&gt; !(plugin.constructor.name === 'FriendlyErrorsWebpackPlugin')
 );
 }

 return config;
 }
};</code></pre>

ターミナルログを非表示にする

例えば<code>https://example.com/game</code>という URL に成果物をアップロードするためにどこか<code>/game</code>というディレクトリに置く必要があるとします。 その時に、デフォルト設定の成果物をアップロードしてしまうと、 NextJS は<code>/_next/xxx.js</code>を読もうとしますが実際には<code>/game/_next/xxx.js</code>である必要がある為読み込むことができません。そんな時には、<code>next.config.js</code>で<code>assetPrefix</code>を設定します。これで生成されるファイルの参照パスの頭に指定したパスを付けることができます。 また、一応<code>NODE_ENV=production</code>を付けた時だけプレフィックスを付けるという設定にしています。 これは成果物をローカルで確認したい時にローカルサーバーを建てて見るだけで簡単にチェックできるようにするためです。（<code>/game/_next/xxx.js</code>とかになるとそういうディレクトリ構造でサーバーを建てないと駄目で面倒）<pre><code class=language-js>const isProd = process.env.NODE_ENV === 'production';
module.exports = {
 assetPrefix: isProd ? 'https://example.com/game' : '',
};</code></pre><code>package.json</code>の<code>scripts</code>は以下のようにします。<pre><code class=language-json>{
 "scripts": {
 "next.build": "next build",
 "next.export:prod": "NODE_ENV=production next export",
 "next.export:dev": "next export",
 "build:prod": "yarn next.build &amp;&amp; yarn next.export:prod",
 "build:dev": "yarn next.build &amp;&amp; yarn next.export:dev
 }
}</code></pre>あとは適当な<code>build.*</code>を実行するといいと思います。<pre><code class=language-sh>yarn build:prod # 本番用ビルド
yarn build:dev # 確認用ビルド</code></pre>

相対パスな URL に静的ビルドした成果物を置く

<div class=n-md_h3-box><a href=#Head_の_chilren_として_title_タグを含む_SFC_を入れても_title_要素にテキストが入らない場合+問題 aria-label=問題のアンカー class=n-md_h3-anchor></a><h3 id=Head_の_chilren_として_title_タグを含む_SFC_を入れても_title_要素にテキストが入らない場合+問題 class=n-md_h3-heading>問題</h3></div>こんなSFCを用意してました。<pre><code class=language-js>export const Meta = ({title}) =&gt; {
 return (
 &lt;&gt;
 &lt;meta name="twitter:title" content={title} /&gt;
 &lt;meta property="og:title" content={title} /&gt;
 &lt;title&gt;{title}&lt;/title&gt;
 &lt;/&gt;
 );
};
</code></pre><code>title: &#39;foo&#39;</code>として展開後こんな感じで入ってくれません。。<pre><code class=language-html>&lt;meta name="twitter:title" content="foo" /&gt;
&lt;meta property="og:title" content="foo" /&gt;
&lt;title&gt;&lt;/title&gt;</code></pre><div class=n-md_h3-box><a href=#Head_の_chilren_として_title_タグを含む_SFC_を入れても_title_要素にテキストが入らない場合+解決 aria-label=解決のアンカー class=n-md_h3-anchor></a><h3 id=Head_の_chilren_として_title_タグを含む_SFC_を入れても_title_要素にテキストが入らない場合+解決 class=n-md_h3-heading>解決</h3></div>とりあえず直下に持っていけば大丈夫でした。<pre><code class=language-js>&lt;Head&gt;
 &lt;Meta title={title} /&gt;
 &lt;title&gt;{title}&lt;/title&gt;
&lt;/Head&gt;</code></pre>

Head の chilren として title タグを含む SFC を入れても title 要素にテキストが入らない場合

<div class=n-md_h3-box><a href=#Head_コンポーネントの中身は頭に追加される+問題 aria-label=問題のアンカー class=n-md_h3-anchor></a><h3 id=Head_コンポーネントの中身は頭に追加される+問題 class=n-md_h3-heading>問題</h3></div>例えば<code>_document.jsx</code>で<code>&lt;head&gt;</code>のデフォルトを定義して各ページでそれを上書きしようとしてもできないものがある。<div class=n-md_h3-box><a href=#Head_コンポーネントの中身は頭に追加される+例 aria-label=例のアンカー class=n-md_h3-anchor></a><h3 id=Head_コンポーネントの中身は頭に追加される+例 class=n-md_h3-heading>例</h3></div><h4 id="<code>_document.jsx</code> の <code>&lt;head&gt;</code>"><code>_document.jsx</code> の <code>&lt;head&gt;</code></h4><pre><code class=language-js>&lt;head&gt;
 &lt;title&gt;foo&lt;/title&gt;
&lt;/head&gt;</code></pre><h4 id="<code>pages/index.jsx</code> の <code>&lt;Head&gt;</code>"><code>pages/index.jsx</code> の <code>&lt;Head&gt;</code></h4><pre><code class=language-js>const Head = require('next/head');

&lt;Head&gt;
 &lt;title&gt;bar&lt;/title&gt;
&lt;Head&gt;</code></pre><h4 id=結果>結果</h4><pre><code class=language-html>&lt;title&gt;bar&lt;/title&gt;
&lt;title&gt;foo&lt;/title&gt;</code></pre><div class=n-md_h3-box><a href=#Head_コンポーネントの中身は頭に追加される+解決 aria-label=解決のアンカー class=n-md_h3-anchor></a><h3 id=Head_コンポーネントの中身は頭に追加される+解決 class=n-md_h3-heading>解決</h3></div>ページ毎にすべて<code>&lt;Head&gt;</code>に書く。 まぁ<code>&lt;title&gt;</code>は何かうまくやってくれるみたいですが、ツイッターカードとかはうまく取得できてませんでした。

Head コンポーネントの中身は頭に追加される

<code>next@8.1.1</code>より<code>@zeit/next-typescript</code>を使わずにいけるようになりました。Next プロジェクトルートに<code>tsconfig.json</code>を起き以下を設定します。<pre><code class=language-json>{
 "allowJs": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true,
 "noEmit": true,
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "preserve"
}</code></pre>これらは Next 側で強制的に上書きされてしまうので上記のまま使うようにします。あとはそのままページを<code>.tsx</code>で書いていくだけです。<div class=n-md_h3-box><a href=#TypeScript_で書く+いくつかの記法が使えない aria-label=いくつかの記法が使えないのアンカー class=n-md_h3-anchor></a><h3 id=TypeScript_で書く+いくつかの記法が使えない class=n-md_h3-heading>いくつかの記法が使えない</h3></div>以下の記法を使うとエラーになります。（<code>babel</code>が対応してない？）<ul><li><code>const enum</code></li><li><code>namespace</code></li></ul><div class=n-md_h3-box><a href=#TypeScript_で書く+注意 aria-label=注意のアンカー class=n-md_h3-anchor></a><h3 id=TypeScript_で書く+注意 class=n-md_h3-heading>注意</h3></div><code>declare module &#39;&lt;package-name&gt;&#39;</code> とそれを参照する<code>typesRoot</code>を<code>tsconfig.json</code>に設定してしまうと、「そんなモジュールない」というエラーが起きてしまうようです。

TypeScript で書く

<div class=n-md_h3-box><a href=#Web_Worker_を使う+想定 aria-label=想定のアンカー class=n-md_h3-anchor></a><h3 id=Web_Worker_を使う+想定 class=n-md_h3-heading>想定</h3></div>このような TypeScript な NextJS 環境を想定してます。<h4 id=依存のインストール>依存のインストール</h4>以下の8つをインストールします。<ul><li><code>next</code> <code>@types/next</code></li><li><code>react</code> <code>@types/react</code></li><li><code>react-dom</code> <code>@types/react-dom</code></li><li><code>@types/node</code></li><li><code>typescript</code></li></ul><pre><code class=language-sh>yarn add {,@types/}{next,react,react-dom} @types/node typescript
</code></pre><h4 id=トップページ作成>トップページ作成</h4>表示が確認できればいいので最低限で<code>src/pages/index.tsx</code>ファイルを作ります。<pre><code class=language-sh>mkdir -p src/pages &amp;&amp; echo 'export default () =&gt; &lt;div&gt;🎉&lt;/div&gt;' &gt; src/pages/index.tsx
</code></pre><h4 id=確認>確認</h4>以下で<a href=https://localhost:5489 target=_blank rel=noopener>localhost:5489</a>を開き「🎉」と出れば準備完了です。<pre><code class=language-sh>npx npe scripts.dev 'next --port 5489'
yarn dev
</code></pre><div class=n-md_h3-box><a href=#Web_Worker_を使う+WebWorker_導入 aria-label="WebWorker 導入のアンカー" class=n-md_h3-anchor></a><h3 id=Web_Worker_を使う+WebWorker_導入 class=n-md_h3-heading>WebWorker 導入</h3></div><code>worker-loader</code>をインストールします。<pre><code class=language-sh>yarn add -D worker-loader
</code></pre><h4 id="worker.d.ts を作る">worker.d.ts を作る</h4>以下の内容で適当な位置（プロジェクト<code>/</code>など）にこのファイルを作ります。<pre><code class=language-ts>declare module 'worker-loader?name=static/[hash].worker.js!*' {
 class WebpackWorker extends Worker {
 constructor();
 }

 export default WebpackWorker;
}
</code></pre>有効な位置に置けば<code>worker-loader?name=static/[hash].worker.js!../workers/worker.ts</code>として読み込んだ時に上記の型で読み込めます。<code>name</code>オプションで<code>static/</code>以下に生成を指定するのは重要で、worker-loader が勝手に設定するパスだと<code>.worker.js</code>が404で読み込めません。<pre><code class=language-txt>👍 /_next/static/8f440f04e8526aebb804.worker.js
👎 /_next/8f440f04e8526aebb804.worker.js
</code></pre><h4 id="Worker ファイルを作る">Worker ファイルを作る</h4><code>src/workers/ping-pong.worker.ts</code>を作ります。何かメッセージが来たら<code>pong</code>と返すだけの Worker です。NextJS により自動生成（または編集）される<code>tsconfig.json</code>によって<code>isolatedModules</code>が有効になります。このオプションによりモジュールになっていない<code>.ts</code>ファイルは怒られます。それを回避する為に、一行目で適当に<code>export</code>してます。 この<code>export</code>はのちに<code>worker-loader</code>により上書きされるで適当で大丈夫です。<pre><code class=language-ts>//! To avoid isolatedModules error 
export default {};

self.addEventListener('message', () =&gt; {
 self.postMessage('pong');
});
</code></pre>まだ<code>postMessage</code>などで型エラーが置きます。これはまだその部分が<code>window.postMessage</code>の型だと思ってるからです。<h4 id=tsconfig.json>tsconfig.json</h4>Web Worker を使うのでその型を取り込みます。<code>tsconfig.json</code>の<code>compilerOptions.lib</code>に<code>webworker</code>を加えます。<pre><code class=language-json>{
 "compilerOptions": {
 "lib": [
 "dom",
 "dom.iterable",
 "esnext",
 "webworker"
 ]
 }
}
</code></pre>これで先程の<code>postMessage</code>周りの型エラーは消えたはずです。<h4 id=next.config.js>next.config.js</h4>コード分割機能で<code>window[&quot;webpackChunk&quot;]</code>などにアクセスした時に Web Worker 上は<code>window</code>が無い為<code>window is not defined</code>エラーにならないように変更します。それには Webpack の設定を編集し、<code>global.globalObject</code>に<code>self</code>を指定します。<pre><code class=language-js>module.exports = config =&gt; {
 config.output.globalObject = 'self';

 return config;
}
</code></pre><h4 id=使う>使う</h4>あとは使うだけです。<code>src/pages/index.tsx</code>を以下のように書き換えます。<pre><code class=language-jsx>import React, { useEffect } from 'react';

export default () =&gt; {
 useEffect(() =&gt; {
 (async () =&gt; {
 const { default: Worker } = await import('worker-loader?name=static/[hash].worker.js!../workers/ping-pong.worker');

 const worker = new Worker();
 worker.addEventListener('message', event =&gt; {
 console.log(event.data);
 })
 worker.postMessage('ping');
 })();
 }, [])

 return &lt;div&gt;🎉&lt;/div&gt;
}
</code></pre>Web Worker はブラウザでしか実行できないので、トップレベルで<code>import</code>すると<code>self</code>周りで(<code>self is not defined</code>のような)エラーになります。なので<code>useEffect</code>の中で動的に読み込みます。その時のパスは<code>worker.d.ts</code>に則って記述します。うまくいくと中身の詰まった<code>default</code>が取り出せます。この中で<code>new Worker(動的に生成されたjsファイルへのパス)</code>と Worker のインスタンスを作ってくれる関数になってます。あとは戻り値の Worker で普段のように使うだけです。<code>ping-pong.worker</code>に対して適当なメッセージを送ります。その後ブラウザで<code>pong</code>とコンソールに表示されればうまくできてます！ここでやったことの結果を<a href=https://github.com/nju33-com/typescript-nextjs-webworker>リポジトリ</a>に置いておきます。<div class=n-md_h3-box><a href=#Web_Worker_を使う+試したこと aria-label=試したことのアンカー class=n-md_h3-anchor></a><h3 id=Web_Worker_を使う+試したこと class=n-md_h3-heading>試したこと</h3></div><a href=https://github.com/zeit/next-plugins/tree/master/packages/next-workers>@zeit/next-workers</a>も試しましたが効きませんでした。ただ中の<code>index.js</code>を見入る感じおかしく無さそうには思いました。

マルチスレッド: Web Worker

Web Worker を使う

今は<code>next@8.0.3</code>が最新です。デフォルト設定そのままだと以下のようになってしまいます。<pre><code class=language-txt>export {default as add} from './add.js'
SyntaxError: Unexpected token export</code></pre>{#追記 2019-08}以下の方法は<code>lodash-es</code>を commoonjs に変換して使う方法です。これでは使う意味がないのでやめましょう。代わりに<code>lodash</code>を使い<code>lodash/chunk</code>のような形で取り込む方法が一番<code>*.js</code>サイズを節約できます。{/追記}<div class=n-md_h3-box><a href=#lodash-es_を使う+直す aria-label=直すのアンカー class=n-md_h3-anchor></a><h3 id=lodash-es_を使う+直す class=n-md_h3-heading>直す</h3></div>これには<a href=https://www.npmjs.com/package/next-transpile-modules><code>next-transpile-modules</code></a>を使います。<code>next.config.js</code>を以下のようにすると直るはずです。<pre><code class=language-js>const withTM = require('next-transpile-modules');

module.exports = withTM({
 transpileModules: ['lodash-es'],
});</code></pre><div class=n-md_h3-box><a href=#lodash-es_を使う+没案 aria-label=没案のアンカー class=n-md_h3-anchor></a><h3 id=lodash-es_を使う+没案 class=n-md_h3-heading>没案</h3></div>ちなみに以下のような設定はどちらも駄目でした。。<h4 id="lodash-es にも next 設定の babel をかます">lodash-es にも next 設定の babel をかます</h4>NextJS の Webpack は<code>node_modules</code>以下をトランスパイルの対象にしていないようで以下のようにしてみましたが駄目でした。<pre><code class=language-js>module.exports = {
 webpack: (config, options) =&gt; {
 config.module.rules.push({
 test: /\.js$/,
 include: /node_modules\/lodash-es/,
 use: [
 options.defaultLoaders.babel
 ],
 });

 return config;
 }
}</code></pre><h4 id=自分で設定>自分で設定</h4><code>babel-loader</code>, <code>@babel/core</code>, <code>@babel/plugin-transform-modules-commonjs</code>辺りを入れて自分で設定を追加してみましたがこちらも駄目でした。<pre><code class=language-js>module.exports = {
 webpack: config =&gt; {
 config.module.rules.push({
 test: /\.js$/,
 include: /node_modules\/lodash-es/,
 use: [
 {
 loader: 'babel-loader',
 options: {
 plugins: ['@babel/plugin-transform-modules-commonjs']
 }
 },
 ],
 });

 return config;
 }
}</code></pre>

lodash-es を使う

<div class=n-md_h3-box><a href=#commonjs_で_esnext_なパッケージを一緒に使う+対象 aria-label=対象のアンカー class=n-md_h3-anchor></a><h3 id=commonjs_で_esnext_なパッケージを一緒に使う+対象 class=n-md_h3-heading>対象</h3></div>cjs で書かれている。つまり以下のように書かれてるもの。例えば、<a href=https://github.com/sindresorhus/ky>sindresorhus/ky</a><pre><code class=language-js>module.exports = /* ... */</code></pre>esnext な<a href=https://developers.google.com/web/updates/2017/06/object-rest-spread#esnext_object_rest_and_spread_properties><code>object-rest-spread-properties</code></a>などが使われてる。<pre><code class=language-js>// 例: ky/index.js
returnValue = {...returnValue, [key]: value};</code></pre><div class=n-md_h3-box><a href=#commonjs_で_esnext_なパッケージを一緒に使う+問題 aria-label=問題のアンカー class=n-md_h3-anchor></a><h3 id=commonjs_で_esnext_なパッケージを一緒に使う+問題 class=n-md_h3-heading>問題</h3></div><ul><li>対象のファイルを Babel で変換しないとエラー</li><li>依存の<code>next-babel-loader</code>の中で<code>next</code>が読み込む<code>.babelrc</code>の設定が<code>modules:false</code>なので変換できても cjs が解決できない</li><li><code>next.config.js</code>上で Babel の設定を上書きできない</li><li><code>.babelrc</code>では処理的に 1 つの設定しか持てない</li><li>自分のソースコードは cjs にしたくない</li></ul><pre><code class=language-js> webpack(config, {isServer}) {
 if (isServer) {
 return config;
 }

 config.module.rules.map(rule =&gt; {
 if (
 rule.test.test('.js') &amp;&amp;
 Object.prototype.hasOwnProperty.call(rule, 'exclude') &amp;&amp;
 rule.exclude.test('node_modules')
 ) {
 rule.exclude = /node_modules\/(?!ky)/;
 // Module build failed: Error: Duplicate plugin/preset detected.
 rule.options = {
 presets: ['next/babel', {
 'preset-env': {
 modules: 'commonjs'
 },
 }]
 }
 }
 return rule;
 });

 return config;
 },</code></pre><div class=n-md_h3-box><a href=#commonjs_で_esnext_なパッケージを一緒に使う+解決 aria-label=解決のアンカー class=n-md_h3-anchor></a><h3 id=commonjs_で_esnext_なパッケージを一緒に使う+解決 class=n-md_h3-heading>解決</h3></div>やっぱりこれだけにルール追加するぐらいしかなかった。（読み込んでるプラグインなどはデフォルトの設定と同じもの）<pre><code class=language-js> webpack(config, {isServer}) {
 if (isServer) {
 return config;
 }

 config.module.rules.unshift({
 test: /\.jsx?$/,
 include: /node_modules\/ky/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env'],
 plugins: [
 '@babel/plugin-proposal-class-properties',
 '@babel/plugin-proposal-object-rest-spread',
 '@babel/plugin-transform-runtime',
 ],
 },
 },
 });

 return config;
 },</code></pre>

commonjs で esnext なパッケージを一緒に使う

<div class=n-md_h3-box><a href=#起こったエラーメモ+デプロイ時にずっと「Initializing」のまま aria-label=デプロイ時にずっと「Initializing」のままのアンカー class=n-md_h3-anchor></a><h3 id=起こったエラーメモ+デプロイ時にずっと「Initializing」のまま class=n-md_h3-heading>デプロイ時にずっと「Initializing」のまま</h3></div>同プロジェクトでデプロイ中のデプロイメントがあると、それが終わるまで最新のデプロイは「Initializing」になるようです。<pre><code class=language-sh>now ls &lt;project-name&gt;</code></pre>を実行し、いらないデプロイメントを削除してみると治るかもしれません。<div class=n-md_h3-box><a href=#起こったエラーメモ+build_時 aria-label="build 時のアンカー" class=n-md_h3-anchor></a><h3 id=起こったエラーメモ+build_時 class=n-md_h3-heading>build 時</h3></div><h4 id="UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open &#39;//../../.svgo.yml&#39;">UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open &#39;//../../.svgo.yml&#39;</h4><pre><code class=language-sh>(node:1) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '//../../.svgo.yml'
 at Object.fs.openSync (fs.js:646:18)
 at Object.fs.readFileSync (fs.js:551:33)
 at e.exports (/var/task/.next/server/static/iqdZhcAsT3LfSmq39Ilkz/pages/_document.js:206:307121)
 at new u (/var/task/.next/server/static/iqdZhcAsT3LfSmq39Ilkz/pages/_document.js:18:123)
 at TPFN.t.default.r.default.plugin (/var/task/.next/server/static/iqdZhcAsT3LfSmq39Ilkz/pages/_document.js:20:223985)
 at n (/var/task/.next/server/static/iqdZhcAsT3LfSmq39Ilkz/pages/_document.js:20:50105)
 at /var/task/.next/server/static/iqdZhcAsT3LfSmq39Ilkz/pages/_document.js:206:21288
 at &lt;anonymous&gt;</code></pre><code>now</code>(2)へのデプロイ時に、<code>svgo</code> 付近のパス周りで<code>__dirname</code>が<code>undefined</code>なのが原因かも。<code>postcss</code>と<code>cssnano</code>を<code>_document.tsx</code>で使っていたのでこれをやめて、さらに<code>postcss</code>と<code>cssnano</code>をアンインストールして依存から外した。これで<code>svgo</code>依存も無くなり表示できるようになった。<h4 id="TypeError: r.isMemo is not a function">TypeError: r.isMemo is not a function</h4><code>now</code>(2)へ<code>@now/next</code>でのデプロイ時に。<a href=https://github.com/zeit/next.js/issues/5750#issuecomment-451607604>https://github.com/zeit/next.js/issues/5750#issuecomment-451607604</a>のとおりに修正で治りました。<h4 id="Error: pages/index.js from Terser">Error: pages/index.js from Terser</h4><code>next.config.js</code>の Webpack の設定で <code>EnvironmentPlugin</code> で <code>NODE_ENV=production</code> と上書きしていたので、これをやめた。<h4 id="TypeError: Cannot read property &#39;minify&#39; of undefined">TypeError: Cannot read property &#39;minify&#39; of undefined</h4>2019-02-04発生。<code>terser@3.14.1</code>を指定する<pre><code class=language-sh>yarn add terser@3.14.1</code></pre><code>package.json</code>の<code>resolutions</code>に<pre><code class=language-json>{
 "terser": "3.14.1"
}</code></pre><div class=n-md_h3-box><a href=#起こったエラーメモ+export_時 aria-label="export 時のアンカー" class=n-md_h3-anchor></a><h3 id=起こったエラーメモ+export_時 class=n-md_h3-heading>export 時</h3></div><h4 id="Cannot find module &#39;pages/_document&#39;">Cannot find module &#39;pages/_document&#39;</h4>now 用の設定で<code>target: &#39;serverless&#39;</code>していたのでこれを削除で直った。