Next.js
もうすぐSafariでView Transitions APIが実装されるということでちょっと盛り上がった techfeed.io とはいえ、まだTech Preview中なので、全ユーザーが使うとなるともう少し後になる模様 View Transitions API はChromeでは既に実装されていて、自分でも以前…
takepepeさんの新しい本『実践Next.js』を読んだのでメモ 実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書作者:吉井 健文技術評論社Amazon AppRouterは使ったことがなかったので、この本で情報のキャッチアップをしたい 本の内容は４章ま…
あるプロジェクトのサービス終了に伴い、ページにアクセスされたらトップページに全てリダイレクトをするように設定をしたく調べた Next.jsのredirectsを使う 調べると next.config.js 内で redirects を使うのが良いことがわかった nextjs.org 単純な使い方…
先日、Next.jsで styled-components から linaria に書き換えてみることを行なったが、本番環境での利用は不安だったの一時中断した uga-box.hatenablog.com なので、今度はNext.jsがサポートしている css-modules に書き換えることを試してみた nextjs.org …
Next.jsではないプロジェクトでlinariaがうまくいったので、Next.jsの別のプロジェクトにも導入しようと考えた ↓Next.jsではないプロジェクトで導入した話 uga-box.hatenablog.com ただ、単純にライブラリを使えば良いというのではなく更新されていないライ…
Next.jsのnext/imageを使って画像を表示させている場合で、画像が404で取得できない場合の対処法を考えた 調べたところnext/imageにはonErrorというpropがあり、エラーの場合にはここで設定したコールバック関数が呼ばれるのでこれを使えば良さそう nextjs.o…
フレームワークをNext.jsへ移行することを考えている このとき、Jestで書いたテストもNext.jsに移行することを考えているが、ドキュメントを読むとNext.js 12 のリリース以降、Next.jsにはnext/jestという組み込みモジュールが用意されていることを知った ま…
Next.js（< 13）で次のようなルーティングを行いたい /a-Japanでアクセスされたらlocale=en、country=Japanとしてパラメータを受け取る /ja/a-Japanでアクセスされたらlocale=ja、country=Japanとしてパラメータを受け取る /a-Japan/a-Tokyoでアクセスされた…
Next.js 13で<html lang={locale}>を設定したい Next.js 13以前ではpages/_document.jsで設定するが、Next.js 13 にはpages/_document.jsがなくなるため調べた Next.js 13以前 nextjs.org ドキュメントによるとNext.js 13での必須ファイルapp/layout.tsx（ルートレイアウト）でや</html>…
Next.jsにReduxを導入するとき、SSR中にデータをフェッチしたデータでreduxのstoreを初期化したい どのページでも毎回やりたいことなので_app.tsxのgetInitialPropsの中で行う getInitialPropsはサーバー上で実行される この中で、データフェッチを行いstore…
Next.js に既存のReactアプリを移植してみたらビルド時にFirebase Admin SDK で次のエラーが発生した error - ./node_modules/gcs-resumable-upload/node_modules/google-auth-library/build/src/auth/googleauth.js:xxx:0 Module not found: Can't resolve …
Next.js でtitleタグに以下のように変数を渡していたら <title>{title} | My Company</title> 次のような警告がでた Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children.…
Next.js 13で既存のアプリを動かしてみたらgoogle-map-reactで次のようなエラーが発生した Next.js: TypeError: Cannot read properties of undefined (reading 'getChildren') 以下のISSUEによるとNext.jsというより、React@18とのバージョン互換性の問題み…
Next.js 13の/appを触っていて、getInitiaPropsがなくなったのでどうやってパラメータを受け取るのか調べた 例えば、以下のファイルを用意したとき、 app/blog/[slug]/page.tsx http://example.com/blog/abc/?id=123 のURLで、slugとidの受け取りたい ドキュ…
10月25日の深夜に「Next.js Conf 2022」が開催されて、Next13が発表されたので確認する nextjs.org /appディレクトリ いままでは/pageディレクトリ配下にファイルをおくと設定不要で階層に応じたルーティングが行えるが、同じ用途で新たに/appディレクトリが…
Next.js のgetServerSidePropsとswrやReact Queryなどのデータフェッチライブラリを一緒に使うと、効率が悪い場合があるという話を聞いた getServerSidePropsとはNext.jsのデータフェッチ手法で、getServerSidePropsという関数をページからexportすると、リ…
Remixの開発者が書いたRemixとNext.jsの違いについてのブログを読んだ remix.run 比較対象がNext.jsのSSGとの比較なのでSSRと比較したらまた違うんじゃ？という感想もあるが参考になった たとえば検索ページにおいてはNext.jsのSSGはそのほとんどが事前に生…
Next.js12のミドルウェアに関するお話を聞いたのでメモ なぜ脱Expressになる可能性があるのかが分かっていなかったが、説明を聞いた後はなるほどという状態になった Next.js のミドルウェアとは nextjs.org ミドルウェアは、ユーザーが入力したリクエストに…
Next.js 12に関連して、エッジコンピューティングについてのお話を聞く機会があったのでメモ Vercelのエッジサービス Vercelのエッジサービスは以下の３つで、Next.js 12 でEdge Functionsが新しく追加された Edge Network Serverless Functions Edge Functi…
前回のNext.js12のReact18対応のNew Streaming SSRの続き uga-box.hatenablog.com 次は、React Server Componentsに関して、もう少し詳しいお話を聞く機会があったのでメモ React Server Components React Flightとも呼ばれ、RSCと略されるみたい サーバーサ…
先週、ふんわり理解したNext.js12のReact18対応の続き uga-box.hatenablog.com New Streaming SSRに関して、もう少し詳しいお話を聞く機会があったのでメモ New Streaming SSR React FizzともNew Suspense SSRとも呼ばれるみたい React DOM Serverの新しいレ…
前回Next12のブログを簡単にみたが、React 18のサポートまわりがまとめられなかった uga-box.hatenablog.com そんな中最近、共有会でNext.jsのReact18対応についてお話しを聞いたのと、以下のポッドキャストを聞いたので、メモしておく uit-inside.linecorp.…
Next confのURLインポートの紹介で、Framerによる使用例が紹介されていた 5:28あたり www.youtube.com Framerを知らなかったので調べた URLインポートとは Next.js 12の公式ドキュメントによると、Next.js 12ではESモジュールをURL経由でインポートする機能…
日本時間の10/27 AM1:00 に Next conf 2021 が開催された nextjs.org その際に発表されたNext 12についてのメモ 正直内容の咀嚼ができてないので、関連記事がたくさんでてきたらもう一度書くかも nextjs.org Next 12は過去最大のリリース Rustコンパイラー：…
サードパーティのスクリプトを外部スクリプトとして読み込みたいが、面倒臭いことに検証用と本番用でスクリプトがわかれているため、ドメインをみて動的に読み込むようにしたい また、面倒なのはSSRなら簡単だが、静的ファイルの中でこれをやりたいというの…
スクルロール量に応じてフローティングヘッダーの表示制御を行いたい github.com 上のissueの中で次の実装例がある const handleScroll = () => {}; useEffect(() => { if (typeof window !== "undefined") { window.addEventListener("scroll", handleScrol…
前回isFallbackの位置を間違え、Reactフックの呼ばれる回数が変わりエラーが発生した uga-box.hatenablog.com ドキュメントを読んでいると、lintのルールで検知できることがわかったので設定する 使うライブラリは以下だが、そもそもeslint類を導入していな…
Reactのフックを使っていたら以下のエラーが発生した Error: Rendered more hooks than during the previous render. ブラウザのコンソールには直前に以下のログがでていて Warning: React has detected a change in the order of Hooks called by SamplePag…
前回useEffectを使ってlocalStorageから値を取得することができた uga-box.hatenablog.com 他に調べているとNext.jsではDynamic Importをサポートしているため、Dynamic Importを使ってもlocalStorageから値を取得することができそうということに気づいた ne…
Next.jsのSSGで事前に生成された静的ページでlocalStorageオブジェクトを使いたい SSGのビルド時ではユーザーのブラウザなど知りようがないので、非同期で参照するようにしないとビルド時にエラーが発生していしまう そこで、useEffectを使って非同期にlocal…
