本題
HiLow Blog の開発メモやTIPSをまとめておくページです。
使用技術
Next.js + TailwindCSS + Vercel + Notion (Headless CMS)
Next.js 関連
- 公式チュートリアル
- ISR 対応について
getStaticProps メソッドの戻り値に revalidate を設定することで可能。値は秒刻み。なので、仮に一日ごとなら86400を指定。
export const getStaticPaths: GetStaticPaths = async () => {
const postIds = await PostProcessor.getPostIds();
return {
paths: postIds.map((postId) => ({
params: {
id: postId
}
})),
fallback: false
};
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const id = params.id as string;
const post = await PostProcessor.getPost(id);
return {
props: {
post,
},
+ revalidate: 86400
};
};
export default Post;
- dotenv について
next devコマンドで Next.js を起動している最中に .envファイルに環境変数を追加しても undefined になる。
一度サーバを停止してから再起動すること。
- useLayoutEffect 使用時に warnings が発生する場合
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
useLayoutEffect を使用する前に window の有無で場合分けをする
if (typeof window !== 'undefined') {
useLayoutEffect(effectCallback, []);
} else {
useEffect(effectCallback, []);
}
TailwindCSS 関連
生CSSを扱うことなく、あらかじめ定められたクラスを使うことで、手軽に画面のレイアウトを設定することができるCSSフレームワーク。BootStrap よりは複雑。
- 公式チュートリアル
Vercel 関連
Webアプリのホスティングサービスを提供している会社。Next.js を開発している会社でもあるので、Next.js との相性は抜群。CI/CD のユーザビリティは圧巻の一言。
- 公式
Notion 関連
- 公式ホームページ
- API リファレンス
- 画像の取り扱い
Notion にアップロードしたファイルを API で取得する場合、URL に１時間の有効期限がついているので、ホスティングした後に閲覧者が画像を表示できないケースが発生してしまう。
revalidate による ISR対応をすることにより一定の対応はできるが、根本的な解決にはならない。
解決のための方法としては、ビルド時に Notion から取得した画像を別のストレージに保存したり、useSWR でキャッシュを利用する。