おはようございます。投稿したい記事があったのですが、このブログはweb系についてのみ投稿するようにしたいのでQiitaに投稿してみました。https://qiita.com/chinoshuta/items/ffc665a37a757ad66d5dブログとは違いQiitaではより多くの人の目に見てもらえることになると思うので、大丈夫かな？と不安でしたが、エンジニアとしてこうやってアウトプットしていくのは大事ですね。これからもweb系以外の記事や、より多くの人に見てもらいたい場合はQiitaにも投稿していければと思います。ではまた

こんにちはnext/headersのcookiesはサーバーサイドで用いるNext.jsのcookie用の関数で、Next.jsのサーバーサイドに含まれるリクエスト/レスポンスヘッダーのcookie読み書きが簡単にできるようになっています。公式によるとサーバーコンポーネントではcookieのread,ServerActionsとRouteHandlersではread/writeを行うことが可能です。問題点サーバーコンポーネントではcookieの書き込みができないので、サーバーコンポーネントからcookieの書き込みを行うRouteHandlersを呼び出す実装を行いました。しかしそれでもcookieが書き込めませんでした。await fetch("/api/set-cookie") // サーバーコンポーネントからcookieを書き込むRouteHandlersを呼び出す // リクエストが成功してもcookieが書き込まれない原因原因はcookieそのものの仕組みにあり、サーバーサイドからのcookieの保存はレスポンスヘッダにset-cookieを指定し、それをブラウザが受け取りcookieを保存するという流れになっています。サーバーコンポーネントでcookieの書き込みを行うRouteHandlersを呼び出してもレスポンスヘッダのset-cookieをブラウザが受け取れるわけではなく、書き込めないというわけでした。対処サーバーコンポーネントからクライアントコンポーネントにcookieに書き込みたい値を渡し、クライアント側でcookieの書き込みを行うことで無事に解決することができました。<SetCookieClientComponent name={name} value={value} />

こんにちは当ブログは2年前にGatsby.js + Contentfulで作成しましたが、Contentfulの使い勝手が悪いのとNext14で何か作りたいという思いがあったのでこの度Next14 + MicroCMSで作り直しました。Next.jsは当ブログをGatsby.jsで作成した少し後にバージョン13がリリースされ、App Routerが導入されるなど大きな変更がありましたね。とても気になっていたのですがなかなか触る機会がなく、情報を眺めるぐらいしかできていなかったのですが、今年から参画させていただいている案件の中でNext14を使用しており、また書籍も発売されたのでかなり理解が深まっていました。Next.jsの新しい機能であるApp Routerやキャッシュ機能を用いて実装し、以前のGatsbyより綺麗にブログが作れたと思います。今回のソースコードはこちらに公開しています。ではまた

こんにちは。今回は横浜市磯子区に開業された占いサロンSarey様のWebサイトを作成させていただきました。開業間もないとのことでしたのでシンプルで控えめなデザインで、実装に関してはGatsby.jsを用いてReactベースでコーディングを行い、効率的に開発することができました。私個人としては企業様の案件に参画させていただく働き方がメインで、Web制作については紹介でのみ承らせていただいています。これまで個人としての仕事について記事に書けることがあまりなかったので、今回は紹介させていただきました。

久しぶりの投稿となってしまいましたが、早いものでもう12月となりました。今年一年は大きな動きはありませんでしたが、仕事面ではクラウドやセキュリティなど今まで苦手意識の強かったところも任せていただき、個人的な学習も含め、技術的な視野が広がった一年だったと思います。これからもコーディングだけではなく、クラウド、ネットワーク、セキュリティなどWeb開発における総合的な知識、技術を深めていき、よりクライアント様に貢献できるエンジニアなっていければと思います。今後ともよろしくお願いいたします。