Next.js製アプリケーションのコンパイルを約100倍高速化した話
Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 next@12.2.4 tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
Next.jsアプリのローカライゼーション | POSTD
クイックサマリー ‐ 国際化ルーティングは、厳密にはNext.jsの新機能ではありません。（v.10以降搭載されています。）この記事では、この機能のメリットだけではなく、こうした機能を利用して最高のユーザ体験と円滑な開発者体験を実現する方法についても見ていきます。自己文書化コードやバンドルサイズの削減、さらにはランタイムエラーではなくコンパイル時エラーに興味のある方は、是非このまま読み進めてください。 開発中のアプリにおいて、ロケール（または国、あるいは両方）ごとにルートを設定したい場合、Next.jsで簡単に対応できるようになりました。プロジェクトのrootディレクトリにnext.config.jsがない場合、新たに作成してください。このスニペットからコピーしても構いません。 /** @type {import('next').NextConfig} */ module.exports
Design Doc for react-boilerplate-2022
これは何? React(Next.js)アプリケーションのテンプレートのための Design Doc React(Next.js)アプリケーションのテンプレートとして実装したリポジトリ shimpeiws/react-boilerplate-2022 の設計についてのDesign Docです SSR/ISRはせずnext exportしてStatic Fileを出力する構成です API Routesを使っていますが、API接続コードをローカルで動作させるためのもので本番動作させるためのものではありません Design Doc 本ドキュメントは実装したリポジトリの構成、ライブラリの選定理由など設計についての背景を示すためのドキュメントという位置づけです 「デザインドックで学ぶデザインドック」(https://www.flywheel.jp/topics/design-doc-of-desig
Next.jsで静的サイトを作成する際によく使っているライブラリまとめ
この記事は、先日催された「ジャムジャム！！Jamstack_5」で登壇した際の内容を再度まとめたものとなります Next関連 next-seo Seoコンポーネントのようなものが踏襲されてる JSON-LDのサポートも入っていてサポート範囲が広い next-sitemap sitemap.xmlとrobots.txtを作成してくれる 分割もしてくれる configファイルの中で細かい設定ができる pathpida 再生したページのパスの定数ファイルを作ってくれる便利なやつ タイポが無くなって助かる typed-scss-modules CSS Modlesでスタイリングをする際に、.module.(sc|c)ssに対して型定義ファイルを作成してくれる。 宣言漏れや補完など、痒い所に手が届く headlessCMS関連 microcms-js-sdk 最近扱っている案件のheadlessCM
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
Next.js の状態管理 2020
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
新しくnext.jsで作るプロダクトで CSS Modules か CSS in JS か決める調査や思考のログ
前提 実行速度は可能な限り上げたいものの、作ろうとしているのは実行速度を極力 上げる必要があるアプリケーションではない チームメンバーは今のところCSS in JSの知見しかない よほどメリットが上回らない限り、なるべくwebpackやbabelやpostcssなどの設定を書きたくない 感じていた課題 書きやすいが読みづらい 幾つかの記事で述べられているように、ただスタイルを付与して別名を付けたコンポーネントなのか、処理上/atomic design上の意味のあるReact Componentなのか判別しづらい styled-componentsをnext.js SSRで動かすための対処 のように _doucment.tsx に一手間挟む必要がある CSS in JSとstylelintの相性の悪さ 2020年秋頃だと babel設定が特定の条件を満たしているときに https://git
Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr
Next.jsで動的にXMLサイトマップを生成する
2021年1月現在、Next.jsでXMLサイトマップを生成するライブラリとしてはnextjs-sitemap-generatorが最も人気のようです。 nextjs-sitemap-generatorのドキュメントを軽く読む限り、Next.jsのCustom Serverを使用してビルド時にサイトマップを生成する仕組みのようなので、以下のようなケースでの使用には最適とは言えません。 Custom Serverは触りたくない コンテンツ追加のタイミングでビルドが走らないユーザー投稿型のサイトでも、サイトマップを一定間隔で更新したい 個人的に色々と試してみたところ、思った以上に簡単にXMLサイトマップを動的に作ることができたので、その方法を共有します。 Next.js + TypeScriptで動的にXML Sitemapを生成する 以下のような方針で実装します。 sitemap.xmlをN
NextのJSぜんぶ抜く
サイトパフォーマンスを最適化するため、export 時に Next.js のランタイムを全部抜いた。 どういうことか？ このブログは静的書き出しをしているので、ただの静的なドキュメントといえる。だが Next にしろ Nuxt にしろ、書き出したページをブラウザで読み込むと JS アプリケーションとして振る舞うために Hydration 処理が行われる。これをするために JS モジュールの読み込みや Scripting 処理の負荷が発生する。 書き出された HTML には Hydration 処理用に JS モジュールやシリアライズされた state が挿入されている ピュア HTML を目指して しかしこのブログはドキュメントでありアプリケーションではないので、ほぼ JS を動かす必要はない。state は不要だし、client-side routing も要らない（先読みに必要かもだが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
