Next.js

ウェブ制作

Next.js (AppRouter) で環境(env)の値をSCSSの変数に渡す方法

Next.jsのenvに設定された値をSCSSの変数に渡して利用する方法を紹介します。 next.config.js の設定 // next.config.js module.exports = { sassOptions: { addit...
ウェブ制作

Next.js App Routerとカスタムメタデータの追加方法

Next.jsのApp Routerを使ってサイト運営を始めたら、SEO効果を高めるためにさまざまなメタタグの追加にチャレンジすることになるでしょう。特に、TypeScriptを駆使してMetadataの型定義を活用する場面では、gener...
ウェブ制作

Next.jsでPrettierを使ってコード整形を行う方法

前提条件 Prettier の設定は既にしておく ↓Next.jsの場合はこの記事を参考 必要モジュールのインストール yarn add -D stylelint stylelint-config-prettier stylelint-co...
ウェブ制作

Next.jsでprettierの設定

Next.jsでprettierを設定する最低限の設定をまとめます。 モジュールのインストール yarn add -D eslint-config-prettier prettier @typescript-eslint/parser .e...