getServersideProps

zenn.dev undefinedはJSON的に有効じゃないから、とのこと nullを返すようにすればOK

udemyのReact完全入門ガイドを視聴したので、新しく学んだことをメモしました。 React完全入門ガイド 4 章 React に触れる package.jsonのstartは開発環境でサーバーを動かすコマンド package.jsonのbuildは本番環境用にビルドするコマンド package.jsonのejectはcreate-react-appで作った隠しファイルを表示するコマンド Vite でも create-react-app でも React 自体の挙動は変わらない Vite でのSWCはより高速にビルドを行うためのツールで、容量は重い importで相対パスを使う場合は同じ階…

本記事は Reactウィーク 3日目の記事です。📍 2日目 ▶▶ 本記事 ▶▶ 4日目 📱 はじめに Pages Router: シンプルなファイルベースのルーティング 主な特徴 利点 欠点 Pages Router を使うべき場面の具体例 App Router: 次世代の柔軟なルーティング 主な特徴 利点 欠点 App Router を使うべき場面の具体例 どちらを選ぶべきか？ Pages Router 利用者が App Router を使い始めて苦戦したポイント まとめ はじめに こんにちは。先日配信されたPerfumeの最新アルバムがかっこよくて、最近なかなか寝付けなくなっているNRIネ…

はじめに 外資就活ドットコムでは、ユーザーのセッション管理にCookieを利用しています。現在、セキュリティ強化を目的として、セッション管理のアップデートが進行中です。 この記事では、Next.js上でCookieを扱う方法を紹介します。 Cookieとはなにか Cookieとは主にセッション管理やユーザー情報の一時的な保管のために使われる技術で、たくさんのWebサービスで利用されています。 nookiesの紹介 Next.jsでCookieを扱うには、『nookies』というライブラリがおすすめです。 https://github.com/maticzav/nookies 軽量かつ簡単にCo…

前書き 本記事の趣旨 完成イメージ図 本記事で取り扱わないこと 対象読者 デプロイ用のCDK作成 フロントエンドのプロジェクト作成 バックエンドのプロジェクト作成 Dockerfileの編集 app.pyの編集 requirements.txtの編集 AWSのインフラ部分の作成 CDKのデプロイ デプロイ後のリソースの確認 サービス 作成順序について ECSのコンテナ同士の通信関係の表現 バックエンドコンテナの名前解決はどうなっているか？ マネジメントコンソールから動作を確認する 負荷をかけて、挙動を確かめてみる。 まとめ 前書き CS1の石井です。 直近の案件でECSを使う構成を検討しており…

Next.jsでwindow is not definedというエラーが発生する場合の対処方法 1. クライアントサイドでのみコードを実行する 2. ダイナミックインポートを使用する 3. useEffectを利用する 4. カスタムフックを使用する 5. サーバーサイドレンダリングを明示的に無効化する まとめ Next.jsでwindow is not definedというエラーが発生する場合の対処方法 Next.jsで「window is not defined」というエラーが発生するのは、通常、サーバーサイドレンダリング（SSR）を行っている際に、クライアントサイドにのみ存在するwind…

Next.jsでaxiosのinterceptorsの設定処理はクライアントサイドとサーバサイドのどちらで実行されるのか クライアントサイド サーバーサイド 結論 Next.jsでaxiosのinterceptorsの設定処理はクライアントサイドとサーバサイドのどちらで実行されるのか Next.js では、axiosのinterceptors の設定処理はクライアントサイドとサーバーサイドの両方で実行される可能性があります。 Next.js はユニバーサル（サーバーサイドレンダリングとクライアントサイドレンダリングの両方をサポート）なフレームワークであるため、設定の場所や使用方法に応じて異なり…

SSGとSSRの違い SSG（Static Site Generation） 特徴 利点 欠点 SSR（Server-Side Rendering） 特徴 利点 欠点 使い分けのポイント 例 SSGで作成されたページには認証機能やAPI呼び出し処理は実装できるのか 認証機能の実装 API呼び出しの実装 まとめ SSGとSSRの違い SSG（Static Site Generation）とSSR（Server-Side Rendering）は、ウェブページの生成方法に関する2つの異なるアプローチです。 それぞれの特徴と利点について説明します。 SSG（Static Site Generation…

これに関しては本当にただなんとなくやってみたかったというか、雑な興味本位でやってみました。 . └── pages/ └── dir/ ├── index.tsx ├── page1.tsx ├── page2.tsx └── nested/ ├── page3.tsx └── page4.tsx とあったときに、 /dir のページで page1 page2 nested/page3 nested/page4 みたいなリンクを生成したいなと思い、それを実装してみました。 dynamic routingは当たり前ですが全く考慮してません。 今回はNext.jsのPages Routerで実現し…

自分がNext.jsに拘りNext.jsを使う主な理由は、SSGとかSSRとかというよりはサーバーサイドの処理をNext.jsの中に書きたいからんで、End to Endの型安全とVertical Sliceを徹底したいからこれに限る— 🦄けい©︎：プログラマーアイドル🦄 (@k1_c_) 2024年5月16日 UI⇔Application⇔Domain⇔Storageというレイヤーをガッツリ統合し、機能単位での依存を最低限にすることをVertical Sliceと言うらしい。縦の結合は最大化、横の結合は最小化。知らなかった。理にかなっている。 www.jimmybogard.com 一番型の…

Next.jsとは？React.jsとの違い Next.jsで書いた処理の例 Next.jsで書いたサーバサイドレンダリング処理の例 Next.jsで書いたサーバサイドレンダリング処理でAPIからデータを取得する場合の例 Next.jsとは？React.jsとの違い Next.jsはReact.jsのフレームワークの1つであり、React.jsをベースにしてサーバーサイドレンダリングや静的サイト生成などの機能を提供します。 React.jsは単なるUIライブラリですが、Next.jsはReact.jsを使用して、より複雑なウェブアプリケーションを構築するためのフルスタックフレームワークです。 …

あるプロジェクトで Page routing の Next.js を SSG で作成したサイトを Vercel でホスティングしたものを CloudFront と Lambda@Edge を使って別ドメインの URL からサイトを表示させるようにしていた。 図で書くとこんな感じ CloudFront を使った別ドメイン (b.com/foo) からサイトを見たときだけページ内リンク (next/link) で遷移時にアプリがクラッシュしてしまう問題が発生した。 すっごくレアケースだと思うけど記録としてメモしておく 環境 Next 13.5.4 React 18.2.0 TypeScript 5…