Next.js 11について

先週、Next.js11がリリースされましたね。 この日はNext.jsのボイラープレートのPRを出した後、自分もオンラインカンファレンスに参加してリリース発表の動画をリアルタイムで見ていました。 今回Next.js11になって変更点がどのようになったのかをざっくりと記事にしたいと思います。 fast refreshの強化 コーディング中に自動でブラウザ反映するfast refreshの速度が改善されリアルタイム性があがっています 特に今回のバージョンでは開発者側のエクスペリエンスの向上がフォーカスされているようです。 develop preview…

React.memo/useMemo/useCallbackを使ってサイトを最適化

React開発においては、不要なレンダリングを防ぐためにReactで用意されたHooksを使用してメモ化を意識した開発を行う必要があります。 特に実際の開発においては以下の3つのAPIをたびたび使用します。 React.memo useMemo useCallback 本記事ではこの3つのAPIについて書いていていきます。 Reactのメモ化についてすでに熟知している人は読む必要のない記事です。 メモ化とは? まず初めにここでいうメモ化についてちゃんと定義しておきます。 メモ化はプログラミングでよく知られた概念であり、関数呼び出しの結果をキャッシュし、キャッシュを再利用することによってプログラムを高速化することを目指しています。…

Next.jsでサイトマップを爆速で生成してくれるパッケージ

自分が携わってきたプロジェクトで何度かサイトマップの生成の実装をおこなってきました。 コードを書くものもあれば、パッケージを使用してサクっと作ってしまうケースもありました。 その中でも個人的にすごく設定が簡単で爆速でサイトマップを生成してくれるパッケージを紹介します。 それがこちら next-sitemap 「Next.js sitemap generator」などで検索するとこちらのnextjs-sitemap-generatorが一番にでてきます ですが個人的にはnext-sitemapを推したいです。ちなみにGithubのスター数もnextjs-sitemap-generatorといい勝負です。(2021/2/25時点) nextjs-sitemap-generatorのほうはカスタムサーバーなどサーバーを通してビルドを実行する必要がありますがnext-sitemapのほうはというと簡単な設定ですぐに終わります。…

Next.jsでCSRアプリを実装する

Next.jsを使ってCSRアプリを実装する方法について書きます。自分が開発をしていた時にCSR化の情報があまり得られなかったのでここに書いておきます。 昨今SSG(静的サイトジェネレート)が追加されてから今はこちらを利用するようにVercelは推奨しています。 しかしながら、実装を進めていく際、ホットリロードする時もSSR(サーバサイドレンダリング)環境で進めることの方が多いのではないでしょうか? 自分自身、SSR環境で実装を行うと、しばし予期せぬwarningに見舞われることがありました。 例えば、クライアントとサーバーでのレンダリング内容に差異が生じしてしまう Warning: Text content did not…

Next.jsのルーティングイベントの発火の覚書

データ量が多くページ遷移をするときにかなり時間がかかってしまうようなケースが存在する その場合routerの状態を監視してイベントを付与するのがよい Next.jsにおいてはルーティング情報がuseRouterなどから取れる そのためNextのLinkタグを使った遷移をするとイベントを監視することもできる const router = useRouter(); // ルーティングイベント発生時にイベント発火…
1 2 3 4