Next.js ver13系でmiddlewareを用いてBasic認証を実装する方法をご紹介します。Vercelで環境毎にBasic認証の設定を変更する方法も合わせて記載します

フロント/バックエンド側もNext.jsを用いつつtRPCを導入する方法をご紹介します！またNext.js 13.4 より安定版が使えるようになったApp Routerを用いて実装していきます。

Next.js v13.4.0 からApp Routerが安定版となりました！元々 pages/api にAPIを生やす機能を使ってApollo Serverを動かす事が出来ましたが、App Routerになってapiの作り方も変わりました。この記事ではApp Routerを用いたNext.jsでApollo Serverを動かす方法をご紹介します！

Next.jsでRecoilを使って開発をしているとDuplicate atom key "xxx"というメッセージが表示される事があります。特に問題が起きる・影響があるわけではないですが、なんとなく気になりますよね。このメッセージを表示させなくする解決方法を見つけたため記載します。

Next.js ver.12からMiddlewareが導入されました。これによりライブラリを使わず簡単にBasic認証を設定することが出来るようになりました

Next.jsでBASIC認証（ベーシック認証）を導入する方法をご紹介します。最終的にローカルではBASIC認証がかからないけど、VercelではBASIC認証がかかるようにします。

Tailwind CSSを使っているNext.jsのプロジェクトで、Storybookを導入しようとしたところエラーが起きました。解決方法を記載します

コンポーネントの見え方・使い方などを管理するのに便利なstorybook。この記事ではReact or Next.jsのプロジェクトにStorybookを導入する方法をご紹介します

Reset.cssをNext.jsに導入します、ここでは2つのやり方をご紹介します。cssファイルをDLしてプロジェクトに配置する・Nodeのパッケージとして配信されているものを追加する

Next.jsで$yarn run dev（next） した際に、 .env.local と .env.staging を使い分けられるようにします。