ウェブ制作 Xに画像とテキストを一緒に渡すシェアボタンの作り方【Web Share API】
Web Share APIのfilesとtextで、画像と本文をOSの共有メニューへまとめて渡す方法を紹介。PNGからFileへの変換、共有前の画像生成、Next.jsでの扱い、非対応時の処理をコード付きで説明します。
Next.js
ウェブ制作 
ウェブ制作 Next.js SSGビルドサイトで遷移の検知方法とエラーの回避策
Next.js で SSG (静的サイト生成) を使用する際、クライアントサイドでのページ遷移や URL のクエリパラメータの変更を検知するために、useSearchParams や usePathname フックを使うことができます。ただ...
ウェブ制作 Next.jsとJestの設定と実践テストの手順
はるNext.jsプロジェクトにJestを導入し、Reactコンポーネントをテストする方法を説明します。Jestを設定し、簡単なテストを実行できるところまでやってみましょう。以前、Next.jsの環境を作り自動整形機能とSotrybookの...
ウェブ制作 初心者でも安心！Next.js・Storybook・Prettierで作るモダン開発環境
はる今回は最新のNext.jsとStorybookを活用した開発環境の構築方法を紹介します。この環境では、モダンなフロントエンド開発を効率的に進めるためのツールと構成を整えます。開発環境の構成Next.js: バージョン14を使用し、サーバ...
ウェブ制作 Next.js (AppRouter) で環境(env)の値をSCSSの変数に渡す方法
Next.jsのenvに設定された値をSCSSの変数に渡して利用する方法を紹介します。next.config.js の設定// next.config.jsmodule.exports = { sassOptions: { addition...
ウェブ制作 Next.js App Routerとカスタムメタデータの追加方法
Next.jsのApp Routerを使ってサイト運営を始めたら、SEO効果を高めるためにさまざまなメタタグの追加にチャレンジすることになるでしょう。特に、TypeScriptを駆使してMetadataの型定義を活用する場面では、gener...
ウェブ制作 Next.jsでStylelintとPrettierを使ってコード整形を行う方法
前提条件 Prettier の設定は既にしておく↓Next.jsの場合はこの記事を参考必要モジュールのインストールyarn add -D stylelint stylelint-config-prettier stylelint-confi...
ウェブ制作 Next.jsでprettierの設定
Next.jsでprettierを設定する最低限の設定をまとめます。モジュールのインストールyarn add -D eslint-config-prettier prettier @typescript-eslint/parser.esli...