Nr_NarumiumNext.jsのファイル構成と共通ページ設定TweetReact.jsのSSRをしたくてNext.jsを触ってみて少しずつ理解できて来たのでちょくちょく覚書きしていきます。今回は設計や共通ページなどの大枠。リンク先でReadmeと公式ドキュメントを載せておきますが、内容は同じなので見やすいほうを見ればいいと思います。有志の日本語翻訳もありますが、最初にざっと読む用に向いている気がする。v9.1.4フォルダ構成v9.1(2019/10)でsrcやpublicフォルダを使えるようになったので、それを前提に考えてみます。基本的な構成はこんな感じです。//公開静的ファイルこれはcreate-next-appの基本構成にapiフォルダを追加しただけです。最低限pagesフォルダがあれば.nextにビルドされて動きます。ソースとリソースを同じ階層で分けたいのとビルドフォルダをわかりやすくしたいので以下のようにしてみる。"build"};components/側ではgetInitialPropsが使えない点は注意。通常のReactコンポーネントして書いていきます。コンポーネント配置を決めるlayoutフォルダやコンポーネント以外のutilフォルダなんかの置き場所はまだ迷ってます。err)pages直下に特定の名前のjsファイルを置くことでデフォルトで用意されている部分を変更することが出来ます。エラーページ_documentと_appを適当に書いてみるとこうなります。<div>Page</div>;分かりやすい入れ子。HeadやMain、props.Componentの使い方を覚えておくとpages内でちょっと変なことをしやすくなります。Appでいうところのpublic/index.htmlみたいな使い方でいいと思います。CDNでCSSやフォントを読み込んだりデフォルトのヘッダを書いたり。_app.jsの取り扱いはちょっと難しい気がします。レイアウトしたいだけなら専用のコンポーネントを作った方が拡張性がある。getInitialPropsを使ってページ共通の前処理ができるかと思って設定するとページ毎のgetInitialPropsが動作しなくなった。コンポーネントの前処理が終わる前に_app.jsの前処理が終わってしまうのが原因みたいなので、サンプルの_app.jsに以下を書き足してみると想定通り動いた。};};..._app内でも非同期処理をする場合はPromise.all()を使うといい感じ。以下の注意書きもあるのでどこかに何かしらの影響はありそう。Optimization_err.jsはまだデフォルトにリンクでもつけておけば十分かくらいに考えてます。デフォルトのエラーはnext/errorで流用できます。Error;今回はここまでで。追記:_app.jsの静的最適化への影響Noteを読んでよく割らなかった部分ですがソース内コメントを見逃してました。rendered.SSRの必要がないページを静的に返す機能があるけど全てのページでgetInitialPropsが適応されるため無効になるよってことかな。複数ページに対して共通前処理する方法で一番楽だから使いたい気持ちもある。非公開の親ページを作ってインポートしても使うとかも考えてみるか。コメントをキャンセルメールアドレスが公開されることはありません。