すべてのカテゴリ

・概要Next.jsは、ReactをベースとしたJavaScriptのフレームワークです。Next.jsを使うことで、高速で快適なWebアプリケーションを簡単に作ることができます。また、検索エンジン最適化（SEO）がしやすく、開発者の作業効率も向上します。企業によっては、大規模なWebアプリケーションの開発にNext.jsを採用しています。Reactを使ったことがある人なら、Next.jsも簡単に学ぶことができます。・導入企業例ZOZO TechnologiesBASEMercariLINEAirbnbUberNetflixTwitchGitHubHuluNikeなど誰もが知っている大手企業が数多くNext.jsを採用してWebサイトを作成しています。・なぜNext.jsが選ばれているのか？高速で快適なWebアプリケーションを簡単に作ることができ、また検索エンジン最適化（SEO）がしやすく、開発者の作業効率も向上するため、多くの企業で採用されています。具体的には、Next.jsは、ユーザーがページを閲覧するたびにサーバーから必要な情報を取得することができるため、ページの表示速度が速くなり、ユーザーが快適に操作できるようになります。また、サーバーサイドレンダリングにより、検索エンジンがWebサイトのコンテンツを正確に把握し、ランキングを上げることができます。さらに、Next.jsは、Reactの環境をベースにしているため、Reactを使ったことがある人なら、簡単に学ぶことができます。また、豊富なコミュニティやドキュメントがあり、開発者が必要とする情報を手軽に入手できるため、開発の

はじめにNext.jsとSupabaseの認証機能を連携させる際、特に行レベルセキュリティ（RLS）を活用する場合、APIルートの使用は技術的な制約によって推奨されません。本記事では、Supabase SSRライブラリを使用した正しい実装方法について、サーバーコンポーネントでのSupabaseクライアントの使用方法に焦点を当てて解説します。Supabase SSRライブラリの概要2023年後半に導入された「supabase/ssr」は、Next.jsのApp Routerとの統合を強化した新しいパッケージです。従来の認証ヘルパーライブラリに代わるものとして、より一貫性のある認証体験を提供します。このパッケージは、サーバーコンポーネント用のクライアント生成関数、クライアントコンポーネント用の関数、そしてミドルウェア用のセッション更新機能を提供しています。サーバーコンポーネントでのクライアント初期化の重要性サーバーコンポーネントでSupabaseクライアントを初期化する際は、Next.jsのクッキーAPIを活用して認証情報にアクセスすることが重要です。サーバーコンポーネント用のクライアント生成関数には、クッキーの読み取りと設定のための機能を含める必要があります。この設定により、クライアントは認証情報を含むクッキーを読み取り、認証済みリクエストを送信できるようになります。また、認証情報の更新時にはクッキーを適切に設定することも可能になります。サーバーコンポーネントでの認証とデータアクセスサーバーコンポーネントでSupabaseを使用する際の基本的な流れは以下の通りです：① サーバー用

料理が好きな人々にとって、レシピをシェアしたり検索したりすることは日常的な楽しみです。そこで私は、Next.jsを使って料理レシピを簡単に共有できるアプリを作成しました。このアプリでは、ユーザーが簡単にログイン・新規登録を行い、自分の作ったレシピを投稿して、さらに他のユーザーが材料からレシピを検索できる機能も提供しています。さらに、作成したレシピをSNSで簡単にシェアできる機能も追加しました！1. Firebase認証を使ったログインと新規登録アプリの最初のステップとして、Firebaseを使ったユーザー認証機能を実装しました。ユーザーはメールアドレスやGoogleアカウントを使って簡単にログイン・新規登録ができ、自分専用のレシピ投稿ページを持つことができます。Firebase Authenticationは、ユーザー管理を簡素化し、信頼性のあるログイン機能を提供してくれました。2. レシピ検索APIユーザーが投稿したレシピは、材料名やカテゴリーで簡単に検索することができます。検索機能は、APIを使用してデータベースからレシピを取得し、リアルタイムで表示される仕組みです。これにより、ユーザーは自分のキッチンにある材料を入力するだけで、関連するレシピをすぐに見つけることができます。3. レシピ投稿とSNSシェア機能レシピを作ったら、他のユーザーとシェアしたくなりますよね。このアプリでは、ユーザーが自分のレシピを簡単に投稿でき、さらに作成したレシピはSNS（Facebook、Twitterなど）でシェアできる機能も搭載しています。SNSでシェアすることで、友達やフォロワーとレシピを

Next.js（ネクストジェイエス）は、Reactベースで動くフレームワークで、モダンなWebサイトやサービスの開発でよく使われています。「効率よく作れる」「高速」「SEOに強い」など、今のWeb制作に必要な要素をまとめてサポートしてくれるのが特徴です。ここでは、Next.jsで実際にどんなことができるのかを分かりやすく紹介します。1. 高速でSEOに強いサイトが作れるNext.jsはページをサーバー側であらかじめ生成した状態で返せるため、表示が速く、Googleにも評価されやすい構造になります。普通のReactでは弱かった「SEO」「初期表示の遅さ」を解消できるのが大きな魅力です。2. Reactの強みをそのまま活かせるNext.jsはReactのフレームワークなので、コンポーネントの再利用や管理のしやすさはそのまま。UIを細かく作り込む制作にも向いています。3. ルーティング（ページ遷移）が超シンプル通常のReactだとルーティングの設定が必要ですが、Next.jsではフォルダにファイルを置くだけでページになります。ブログ、コーポレートサイト、LPなどでもすぐにページが増やせて管理がラクです。4. API機能を内蔵しているNext.jsには、サーバーサイドで動くAPIを簡単に作れる機能があります。外部のサーバーを用意しなくても、以下のような仕組みを実装できます。お問い合わせフォーム会員登録・ログインデータベースとのやり取り外部APIとの連携「フロントとバックエンドを一つにまとめられる」のが大きなメリットです。5. 画像最適化が自動でできるNext.jsは画像を自動で容量圧縮

初めまして。kanehara32です。私自身、アプリ開発を受託・個人・準委任で行なっており、数多くのアプリを携わりフルスタックエンジニアとして活動しております。クラウド技術やSupabase/Vercel等を使用して運用コスト実装コストの削減が実現できるシステム開発を行なっています。AWS認定やGoogleCloudの認定、受賞歴もあったりと経験豊富なのでお客様と繋がれる機会がないかと思い、ブログを書いております。■「システムの運用費、高すぎませんか？」先日、ある企業の社長さんから相談を受けました。「月10万円もサーバー代払ってるけど、これって普通なの？」「開発会社に聞いたら『これが相場です』って言われたけど...」結論から言うと、その会社のシステムは月1万円で運用できるものでした。なぜこんなことが起きるのか。そして、どうすれば適正なコストで運用できるのか。今日は、私が実際に手がけた「コスト削減しながら性能アップ」の事例をご紹介します。■なぜ多くの企業が無駄なコストを払っているのか▼理由1：「昔ながらの技術」を使い続けている10年前の技術で作られたシステムは、10年前の料金体系のまま。でも技術は劇的に進化しています。《実例：ECサイトの場合》旧システム：・専用サーバー：月8万円・保守費用：月5万円・合計：月13万円新システム（Next.js + Vercel）：・運用費：月2万円（すべて込み）・性能：3倍高速・世界中から快適にアクセス可能▼理由2：「とりあえず大きめに」の罠「将来を見越して余裕を持って」この考えが、毎月の無駄な出費につながっています。最新技術なら、必要に応じて自

理学療法士として専門的知識と責任感を持ち「ひとりひとりの患者さん」と丁寧に向き合った経験と、サービス／アプリ開発で「何万人ものユーザー」に価値を届ける挑戦。その 二つのフィールドを融合 させながら、“人に寄り添うテクノロジー” を形にしている開発者です。🌱 原点 ―― 理学療法士で得た“寄り添う力”リハビリの現場で「痛みが軽くなった！」という笑顔に出会うたび、次の改善アイデアが湧いてきました。しかし 一対一では支援できる人数に限界 があります。“もっと多くの人を同時にサポートしたい”──その想いが私をITの世界へ導きました。🚀 開発者への転身 ―― コードで広がる可能性コードが動き、ユーザーの体験や指標がすぐに変わる。理学療法士時代に直接フィードバックを受け取っていた感覚が、開発の高速 PDCA に引き継がれています。ユーザーの声を吸い上げ、次のリリースに活かすことこそ私の原動力です。◇提供できること • Web／モバイルアプリ開発企画からリリース・運用までワンストップで対応します。React／Next.js ／TypeScript／Firebase／AWS／Teraformなどフルスタックで実装可能です。 • 既存サービス改善データ解析で課題を洗い出し、UX 診断から機能追加・パフォーマンス最適化まで伴走します。 • 業務効率化ツールの開発公開APIを統合したウェブサイトや、事務系の定型作業を自動化・半自動化いたします。使い方が不明な場合は、使い方サポートまで行えます。また、運用においてもご依頼いただける体制を整えております。• プロトタイプ開発企画したアプリケーションのプロ

現代のWebアプリケーション開発では、パフォーマンス、スケーラビリティ、開発効率が重要な要素となっています。特にNext.js、Vercel、Supabaseの組み合わせは、これらすべての要素を高いレベルで実現する強力なスタックとして注目を集めています。Next.jsの技術的特徴と利点Next.jsはReactベースのフレームワークで、現代的なWebアプリケーション開発を大幅に効率化します。レンダリング戦略の柔軟性Next.jsの最大の特徴は、複数のレンダリング方法を提供している点です：サーバーサイドレンダリング（SSR）: リクエスト時にHTMLを生成し、動的コンテンツに最適静的サイト生成（SSG）: ビルド時にHTMLを生成し、静的コンテンツで最高のパフォーマンスを実現インクリメンタル静的再生成（ISR）: SSGの速度とSSRの柔軟性を組み合わせた革新的な手法サーバーコンポーネント: クライアントサイドJavaScriptを削減しつつ、動的コンテンツを提供これらのレンダリング戦略を適切に組み合わせることで、SEOとパフォーマンスを両立させたアプリケーションが実現可能です。APIルートによるバックエンド統合Next.jsのAPIルートは、フロントエンド開発者にとって非常に強力な機能です。pages/apiディレクトリ内にファイルを作成するだけで、サーバーレスAPIエンドポイントを構築できます。これにより、同じプロジェクト内でフロントエンドとバックエンドの両方を構築でき、開発フローが大幅に効率化されます。Vercelによるデプロイメントの最適化Vercelは、Next.jsの

テキストベースでの対応で気を使うところ1. リロードしてメッセージが来ていないかどうか常に確認するこれはスマホアプリでトークルームを立ち上げていると自動でメッセージがあると追加されて分かりやすいですが、パソコンだとリロードしないといけないです2. 何か質問事項などを受けた際には「確認します」とだけメッセージを送り必ずボールは向こうが持つようにする3. １コマで問題を解決してもらうために答えを伝えてから説明する方が勧めやすい場合があるなど、色々知見を得ました

公開してもいいよと了承いただいたので、アップしました。今年１発目にお声がけいただいたプロジェクト。UIやプログラムの分割にこだわりを持つお客さま。何度かやりとりさせていただき、ある程度のものが完成しました。今回も勉強になりました。コンポーネントはマテリアルデザインベースのMaterial UIを採用しました。というわけで、Reactエコシステムのど真ん中案件でした。「rehop.dev/app0」契約しているサーバーです。メニュータブの動きが好きです。ぜひアクセスしてお試しください。

Reactを学習していると、必ず一度はこんな疑問が出てきます。「Next.jsっていつから触ればいいんだろう？」「Reactをもっと極めてからの方がいい？」「今Next.jsに行くのは早すぎる？」結論から言うと、Next.jsに入る“正解のタイミング”は人によって違います。ただし、いくつかの明確なサインがあります。この記事では「今がNext.jsに進むタイミングかどうか」を判断する基準を、React経験者向けに解説します。そもそもReactとNext.jsの関係まず前提として、React：UIを作るためのライブラリNext.js：Reactをベースにしたフレームワーク（実務向け）という関係です。Next.jsはReact + 実務で必要な機能を最初から全部そろえたセットだと思ってもらうと分かりやすいです。まだReactに集中した方がいいタイミング以下に当てはまる場合は、まだReactを優先した方がいいです。useState / useEffect がまだ怪しいprops と state の違いがあいまいコンポーネント分割に迷うフォーム処理や簡単なCRUDがまだ不安「なぜこのコードが動くか」を説明できないこの段階でNext.jsに進むと、ファイル構成App RouterサーバーコンポーネントデータフェッチなどReact以外の要素に頭を持っていかれがちです。👉Reactの基礎が「考えなくても手が動く」状態になるまでは、React単体でOKです。Next.jsに進むべきベストなタイミング逆に、次のような状態になってきたらNext.jsに入る最高のタイミングです。① Reactでアプリ

React を触り始めた頃、多くの人が最初につまずくのが 「Next.jsって何？Reactと何が違うの？そして勉強するの大変？」 という部分だと思います。この記事では、Next.js の学習コストを“正直に”かつ“現実的に”解説します。■ Next.jsは「Reactをやりやすくする便利セット」Next.js は React をベースにしたフレームワークです。React 単体では足りない部分——ルーティング、データフェッチ、SEO、SSR、API などがまるっと揃った“便利パッケージ”のような存在です。ただ、そのぶん「覚えることがちょっと増える」ので、どうしても学習コストは上がります。■ 学習コストが上がる理由1. Reactの基礎が前提になるNext.js は「React が使える人向け」に設計されています。そのため、以下の知識がある前提で進みます。useState / useEffect などのHooksprops / state の仕組みコンポーネント設計fetchの基礎（API通信）Reactがまだ怪しい状態だと、Next.jsの公式ドキュメントが“全然頭に入ってこない”と感じやすいです。2. フォルダとファイルでルーティングが決まるApp Router の登場で、Next.js の構造はかなり変わりました。app/page.tsx、layout.tsx、loading.tsx、error.tsx …など、ファイル名がそのまま機能になる仕組みです。便利ですが、最初は「なんでファイル追加しただけで画面が変わるの？😇」と混乱しがちです。3. サーバーコンポーネント（RSC

モダンなWeb開発を一気に加速させるReactフレームワークNext.js（ネクストジェイエス）は、Reactをもっと使いやすく、もっと高速に、もっと“実務向け”に進化させたフレームワークです。Reactそのままでもサイトは作れますが、実際の開発現場では「ページ遷移をどうする？」「SEOは？」「画像最適化は？」「高速表示はどう実現する？」といった課題が山ほど出てきます。Next.jsは、これらを全部“最初から”解決してくれるオールインワンのReact環境です。■ Next.jsが選ばれる理由① SEOに強いReactは通常、ブラウザ側で表示を組み立てるためSEOに弱いと言われます。Next.jsはサーバー側でHTMLを生成できるため、検索エンジンに優しく、ブログやコーポレートサイトにも向いています。② ページ遷移が爆速Next.jsは“ページごとにファイルを置くだけ”でルーティングが自動化されます。そのうえ独自の仕組みにより、遷移はSPAのように高速で、体験がとても滑らか。③ 画像が自動で最適化されるImageコンポーネントを使うだけで、サイズ調整・形式変換・遅延読み込みなどを全部自動最適化。LCP（表示速度）改善が簡単です。④ APIも同じプロジェクトで作れるAPI Routeを使えば、バックエンドの処理も同じNext.jsプロジェクト内に作成できます。フォーム送信、データ取得、外部サービスとの連携も簡単。⑤ ファイル構造がわかりやすい“pagesディレクトリ”や“appディレクトリ”など、プロジェクトの型が決まっているため、誰が参加しても迷いにくい設計です。■ 何が作れるの

「既存のWebサイトをもっとスピーディに、インタラクティブにしたい」そんなニーズに応える技術として、React は非常に人気です。実際に私も、過去にReactを導入してサイトを全面刷新した経験があります。この記事では、Reactを使うメリット・実装時に意識すべきポイントを現役エンジニア目線で解説します。1. Reactを使うメリット・パフォーマンスが高い（仮想DOMによる高速レンダリング）・コンポーネント化で再利用性が高く、開発スピードが上がる・SPA（シングルページアプリ）によるスムーズな画面遷移・世界的に利用されており、情報量が多く学習リソースも豊富2. 実際の事例：サイト刷新プロジェクト以前、既存のWebサイトをReactで刷新したことで、以下の改善を実現しました。・ページ表示速度の大幅な改善・UI/UXが向上し、ユーザー滞在時間がアップ・保守や追加機能開発がスムーズになり、改修スピードが向上3. 実装時に気をつけたこと・コンポーネント設計を初期段階でしっかり行う・APIとの非同期通信（fetch/axios）の整理・検索に強い構造を意識（サーバーサイドでの事前レンダリングやmeta情報の最適化）Reactは動的な画面描画が強みですが、そのままでは検索エンジンが情報を拾いづらいこともあります。そのため、初期表示時に必要な情報をHTMLとして提供し、meta情報を適切に設定しました。4. Reactが向いている案件・動きの多いUIを持つWebアプリケーション・会員制サイトやダッシュボードなどのSPA・部分的なフロントエンドの刷新（既存サイトへの組み込み）まとめReactは「

Docker 上で Next.js のアプリを動かすこの記事では、Docker のコンテナ（container）内で、Next.js のアプリを動かす手順を紹介します。要領は前回紹介した、Docker を使って Web ホスティングを動かす場合と同じです。Next.js のアプリを作成するDocker の設定を行う前に、「中身」の Next.js のアプリを作成します。 まずは、テンプレートとして、「create-next-app」のスクリプトを利用してテンプレート（デモ）のプロジェクトを作成します。$ npx create-next-app next_sample Next のアプリで Typescript を利用するために Typescript の設定を行います。 Typescript を利用した方が、変数の型の定義が明確になって、インターフェースなどのミスが起こりにくいので、この連載では Typescript の利用を推奨しています。$ touch tsconfig.json$ npm install --save-dev typescript ＠types/react ＠types/node 基本的な設定が完了したら、開発用のサーバーを立ち上げて、テンプレート（デモ）プロジェクトの動作を確認します。$ npm run dev　これで、Next アプリ側の基本的な設定は完了です。Docker の設定続いて、作成したでもプロジェクトを Docker のコンテナ（container）で動かすための設定を行います。Docker の設定は、Dockerfile に Docker

✅できた・修正対応 ・ #Web制作アドバンス Day19 ・Sassの言語のスニペットとして登録してあったものをスコープいじって、全部、CSSでも使えるように ＆そのあとで調べたら、ふつうにNext.jsとSass組み合わせて使えたので、Sassインストール ・ウォーキング9034歩、筋トレ 💡学んだ ・WordPressのツールバー表示時の条件分岐でスタイル当てる方法 ・パンくずリストのカスタマイズを２パターン ・AIに追加で解説してもらったりして、Next.jsやTypeScriptの知識いろいろ 📍次やる ・AI関連の試したいことが後回しになってるので、とりあえず手をつける 🐶雑談  なんか、最近感じてたんですが、結果出してるひとたちって、 よくも悪くも鈍い？？というか、鈍感？？というか、ひとの顔色や、こまかいことを気にしないひとが多い？？ 気がしてます それか、別のタイプで、めっちゃポジティブで、こまかいことを気にしないタイプのひとも？？ 気になって、kindleで検索かけてみたら、20年くらい前に「鈍感力」ってミリオンセラーがありました なんか、地元の図書館にふつうにあって予約したんで、自転車で運動ついでに借りてきます 営業とかも含めて、フリーランスって、繊細さんじゃやっていけないんだろうなぁ と思う今日この頃です

こんにちは！ココナラでシステム開発・MVP開発支援を出品している kanehara32 です。この記事を読んでくださっている皆様との新しいご縁を楽しみにしています。技術的なお悩みから、「こんなこと相談していいのかな？」という小さな疑問まで、どんなことでも構いません。まずは気軽にメッセージをいただければ、一緒に最適な解決策を考えさせていただきますコーヒーでも飲みながら話すような、そんな気軽な雰囲気でご相談いただければ嬉しいです。それでは、本題に入らせていただきますね。■はじめに：大切な社員を守りながら、事業を前進させるためにIT部署のマネージャーや経営者の皆さま、こんなジレンマを抱えていませんか？「新規事業のシステムを早く立ち上げたい」「でも既存システムの保守も止められない」「優秀なエンジニアに辞められたら困る」この問題、実は多くの企業が直面している課題です。私は10社以上の企業様のMVP開発をサポートしてきました。その経験から言えるのは、「適切なタイミングで適切なパートナーを選ぶことが、結果的に最も効率的」ということです。今回は、外注を検討すべきタイミングについて、現場の実例を交えながらお話しします。■外注を検討すべき5つのサイン▼1. エンジニアの離職リスクが高まっている危険度：★★★★★以下のような兆候が見られたら、早急な対策が必要です。・有給取得率が急激に上昇・1on1での不満や疲労の訴え・「転職」という言葉がちらつく・優秀な人材から順に退職の相談《実例：製造業A社のケース》新規事業のMVP開発で、エンジニア3名が半年で退職。・採用コスト：300万円×3名・引き継ぎによる