Next.js

Next.jsでhtmlタグのprefix属性をページごとに出し分ける

公開日: カテゴリ: Next.js

Next.js にはCustom Documentという機能があります。これは、各ページで共通の HTML を上書きするための機能です。html タグ、body タグに属性を付与したり、SEO 対策をするために meta タグを記述すること... 記事を読む

Electron + Next.js + Tailwind CSS で Markdown エディタを作った

公開日: カテゴリ: Next.js

社内勉強会で「Electron + Next.js + Tailwind CSS でエディタを作った」という題で発表をしました。エディタで解決したかった課題を伝え、画面共有でデモをしたところ、嬉しいことに好評だったので記事として残すことにし... 記事を読む

Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話

公開日: カテゴリ: Next.js

この記事は Next.js アドベントカレンダー 2020 の最終日の記事です。本記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration(以下、I... 記事を読む

Next.js + TypeScriptにStorybookを導入して遭遇したエラーを全て共有します

公開日: カテゴリ: Next.js

この記事では、Next.jsにStorybookを導入してTypeScriptでReactコンポーネントを書けるようにする間に私が踏み抜いたバグと解消法を全て紹介します。Storybookとは、UIコンポーネントのカタログを作るツールです。... 記事を読む

Next.jsからSlackに通知を送る

公開日: カテゴリ: Next.js

この記事ではNext.jsからSlackに通知を送る方法を紹介します。Slackに通知を送るにはWebhook URLを取得します。始めはWebhook URLをブラウザからPOSTすれば簡単に実現できると考えていました。しかし、ブラウザで... 記事を読む

Next.jsにTailwind CSSを導入する

公開日: カテゴリ: Next.js

この記事は、Next.jsにTailwind CSSを導入する方法を紹介するものです。Next.jsはVercelが作成しているReactのフレームワークです。また、Tailwind CSSはユーティリティファーストのCSSフレームワークで... 記事を読む

Next.jsでGoogle Analyticsを使えるようにする

公開日: カテゴリ: Next.js

Next.jsはVercelが作成しているReactのフレームワークです。面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です... 記事を読む

Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する

公開日: カテゴリ: Next.js

Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、... 記事を読む