猫でもわかるWebプログラミングと副業

本業エンジニアリングマネージャー。副業Webエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

Next.js で <table> を使おうとして Hydration failed because the initial UI does not match what was rendered on the server.

Next.js でたまにこういうエラーが出てくる。 エラーが出てくるけど、dom は正常に描画されている。 どうやら、HTML タグの使い方がおかしい場合にこのエラーが出てくる事があるようだ。 私の場合は、<table> タグを使おうとしてこのエラーが出たのだが、<table> タグを使</table></table>…

Next.js で、いい感じに head, title, ogp などを配置する【React.js】

Next.js の Head コンポーネントを使う タイトルとかをいい感じに使い回す Next.js の Head コンポーネントを使う Next.js では、 Head コンポーネントを使うことで、 title などの <head> タグ内の属性を設定できます。 import type { NextPage } from 'next'; im</head>…

Next.js で React の Server-side Rendering と Static Generation をやる #5 デプロイ

前回の記事 Vercel にデプロイする 今回使うコード Next.js と Vercel の相性が良い理由 プルリクエストするごとにプレビュービルドする Static Generation されたファイルを Netlify にデプロイするにはどうするのか 前回の記事 今回は Next.js を Vercel …

Next.js で React の Server-side Rendering と Static Generation をやる #4 Dynamin Routes

前回の記事 Dynamic Routes とは Markdown で書かれた記事を表示する 日付をきれいに表示する(CSS) fallback について Catch-all Routes 404 ページをカスタマイズする場合 API を叩く際の注意点 次回 前回の記事 この記事は第4回の記事です。 今までの記…

Next.js で React の Server-side Rendering と Static Generation をやる #3

前回の記事 今回の概要 Pre-rendering とは 2種類の Pre-rendering Static Generation vs Server-side Rendering Static Generation with Data を行う getStaticProps について Server-side Rendering を行う Client-side Rendering を行う SWR(React Hooks…

Next.js で React の Server-side Rendering と Static Generation をやる #2

前回の記事: Docker で Next.js 開発環境を用意する 今回の概要 Next.js チュートリアルのページ ソースコード 新しいページを追加する ページ遷移(リンク) 画像などのアセットの配置方法 title などのメタデータの設定方法 CSSの書き方 Layout グローバル…

Next.js で React の Server-side Rendering と Static Generation をやる #1

なぜこれを勉強しようと思ったか React の Server-side Rendering 技術は重要 Next は Server-side Rendering ではなく Static Generation Next.js を動かす準備 次回 なぜこれを勉強しようと思ったか この記事がたまたま twitter にの記事が流れてきたので…