はじめに 本記事では無料で公開されている企業のエンジニア向け研修資料をまとめました。 近年では、多くの企業が新人向けの研修資料を公開しています。これらの資料は内容が充実しており、初心者から中級者まで幅広いレベルの学びを得ることができます。さらに、資料の作り方も参考になるため、勉強会で発表する人や企業の研修担当者にとっても貴重な情報源となっています。 本記事では様々な企業のエンジニア向け研修資料をまとめましたので、ぜひ参考にしてみてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 この記事の主な対象者 有名企業の研修資料を幅広く確認したい方 エンジニアとして初級から中級レベルの方 独学で学んでいる方 今後研修資料
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気をつけていること、自身の趣味について話しました。全2回。 「とほほのWWW入門」管理人 杜甫々氏 杜甫々氏（以下、杜甫々）：どうも杜甫々です。「とほほのWWW入門」というやつを作っています。こういうところに出ることはあまりなくて、2022年の岡山のオープンセミナーも録画でやっていたので、こんなにたくさんの人の前でしゃべるのは初めてだったりします。 まずちょっと、おじさんの紹介をやっていきます。「とほほのWWW入門」の管理人です。1996年から始めたので、もう27年目に突入ですね。ハンドルネームは杜甫々です。途中で漢字を当てはめてみました。本名は違いますけどね。 広島生まれの広島在住です。もちろんカープファンです。2023年の観戦成績は6勝1敗で、けっこう良かったんじゃないかなと思っています。 次にイ
［速報］Google、Geminiベースの新WebIDE「Project IDX」をオープンベータで公開 Googleは同社の最新生成AIであるGeminiをベースとした新しいWeb IDE「Project IDX」をオープンベータとして公開しました。 Project IDXは、モバイルやデスクトップなどのマルチプラットフォームに対応したフルスタックのWebアプリケーションを、さまざまなフレームワークや生成的AIの支援などを活用して効率的に開発するための、Webブラウザから利用可能な統合開発環境です。 これまでその存在は発表されていましたが、招待されたユーザーのみが利用可能でした。 We want to make generative AI accessible to every developer on the planet. That’s why we’re making Gemini
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
ごあいさつ はじめましての人ははじめまして、こんにちは！BASE BANK Divisionのフロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です。 今回は、ここ数ヶ月の間にOIDC（OpenID Connect）という技術を使った開発を複数行い、この技術の概観を理解することができたので、OIDCの技術概要に触れつつBASE BANKの中でどのように使ったのかをご紹介しようと思います。 OIDCとは何なのか このパートでは、まずOIDCという技術について概要を紹介します。いくつかのWebページに記載されていた内容を参考にしてまとめさせて頂いているので、記事の最後に参照元のリンクを記載しておきます。 また、OIDCをはじめとした認証・認可の仕組みには様々な用語があり、自分自身も「調べれば調べるほど知らない用語が増えて、どんどんわからなくなってきた…」という経験をしたので、
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
チームの生産性と向き合う
こんにちは @glassmonekeyです。 Ubie 株式会社に転職してあっという間に二ヶ月が立ちました。 現在私は toC 向けのアプリケーションに配信する施策を入稿・管理するシステム「案件管理システム」の開発チームに所属しています。 そのチーム内で現在、私はテックリードというロールで、日々の開発を一人のエンジニアとして進めつつもチームの生産性改善、技術的な意思決定のファシリテーションなどに取り組んでいます。 今回のエントリでは、何かと話題となるエンジニアリングの生産性ですが、テックリードとしてどのように向き合ったのか、どのように改善し今後どうしていくのか？を紹介します。 生産性の定義 前提として生産性を正しく計測することは難しく、それこそ生産性を下げる行為だと私は考えています。 @hiroki_daichiさんの開発生産性について議論する前に知っておきたいことに詳細は譲るとして、一般
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。 VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。 Visual Studio Code March 2024 結論 最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 .vscode/settings.js
![[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、転職サービス Findy の開発チームにおける開発生産性の向上に対する取り組みをご紹介します。 以前の状況 モノリスの解体 開発基盤の刷新 コンポーネント設計の刷新 テストの拡充 CI の高速化 改善の効果 まとめ 以前の状況 2020年頃の Findy は Ruby on Rails と React のモノリス構成で作られていました。 機能の増加に従いコードが複雑化し、しだいに開発スピードが伸び悩むようになりました。 ここで Findy Team+ で算出した当時のリードタイムを見てみましょう。 2020年のFindyのリードタイム 上記のグラフから次のことがわかります。 改修が本番に適用されるまで 約1週間 かかる プルリクエストがレビューされるまで 約5日 放置される
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
別にみんなそうするべきとは全く思わないのだけど、僕は最近GitHub Copilotを意図的に無効にすることがあるので、そのへんについて雑に書いておく。 あらかじめ言っておくが、僕はGitHub Copilotを有効にすることもある。この記事もGitHub Copilotおよびそのユーザーを批判する意図は全くない。 GitHub Copilot が便利な場面 僕がGitHub Copilotを使い始めて少なくとも一年以上は経ってる。自分が書こうと思っているコードに近いものが簡単に生成されていくことに最初は感動したし、便利な場面がはたくさんある。 具体的に便利な場面を思い返してみる。 僕は仕事ではNext.jsでフロントエンドを書いたり、NestJSでバックエンドを書いたりしているのだが、その用途では便利だった。僕は自分が関わっているプロジェクトのReactやNode.jsの書き方はある程度
Next.jsでSSRF（=Server Side Request Forgery）の脆弱性が発覚したことが社内で話題になったので、まとめておこうと思います。対象の脆弱性は以下です。 脆弱性の概要 SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です。 今回のNext.jsの脆弱性はhttpヘッダーのHostを書き換えることで、self hostingなNext.jsサーバーから任意のhttpリクエストを送信できてしまうというものです。これは、外部には公開してない内部APIに対するリクエストも可能になるため、SSRF攻撃になりえます。 今回の脆弱性の対象は、以下の条件を満たしている必要があります。 Next.jsをself hostingで運用している Next.jsアプリケーションがServer Actionsを利用して
React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos
Next.js App Router
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
GitHub - openai/openai-assistants-quickstart: OpenAI Assistants API quickstart with Next.js.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
こんにちは、VPoEの北川です。 今回はトレタで現在使用している技術スタックについて紹介します。 創業時から稼働している予約・顧客台帳サービス「トレタ」から現在の注力事業のモバイルオーダーサービス「トレタO/X」までをあらためて振り返ってみると、まるで異なる技術スタックになっているので歴史的な背景などを辿りながら紹介していきます。 技術スタックの変遷 予約・顧客台帳「トレタ」 会社名にもなっている予約・顧客台帳の「トレタ」は創業当時から稼働している築11年ほどのシステムです。 サーバーサイドにはRubyとRubyOnRailsで作られた巨大なコードベースのAPIサーバーがあり、予約台帳のiOSアプリやウェブ予約などのWebアプリケーションなどが利用しています。 長年このモノリシックなシステムを成長させてきたので、以前からトレタを知ってくださっている人にはトレタはRubyの会社と認知されてい
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
エンジニア向け社内イベントのご紹介と運営を経験してわかったこと - 一休.com Developers Blog
こんにちは。宿泊プラットフォーム開発チームの菊地です。 一休では月に一度、社内エンジニア向けにIkyu Tech Talkを開催しています。2022年から始まり、ありがたいことに2024年3月で丸2年を迎えることができました。 この記事では、Ikyu Tech Talkの2年間のふりかえりをしていきます。 また、私は社内イベントの主催が初挑戦だったので、どうやったらイベントを盛り上げられるのかと悩んだときもありました。 そこで、同じように自分の会社でTech Talkを開催してみたい人に向けてイベント運営の知見もお伝えしたいと思います。 開催のきっかけ もともと定期的なプロジェクトの成果報告会はあるものの、業務で得たエンジニアリングの知見の共有をする場は設けられていませんでした。 あるとき「技術についてざっくばらんに話す場が定期的にあると楽しそう。一緒にやらない？」と声をかけてもらい、面白
Next.js 15 RC
The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. React: Support for the React 19 RC, React Compiler (Experimental), and hydration error improvements Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default Partial Prerendering (Experimental): New Layout an
TSKaigi 2024 で話した「Prettier の未来を考える」という発表のスピーカーノートです。スライドは こんにちは、今日は「Prettierの未来を考える」というタイトルでお話させていただきたいと思います。 鈴木 颯介と言います。ユビー株式会社でプロダクト開発エンジニアとして働きながら、筑波大学でパソコンの勉強をしています。オープンソースソフトウェアが好きで、今日お話するPrettierのメンテナーをしたり、トランスパイラのBabelのコミッターをしたりしています。最近はWebKitのJSエンジンにたくさんパッチを投げたりしています。 私が働いているユビーは、TSKaigiのGold Sponsorをさせてもらっています。ブースがあります。ユビーのグッズの他に、Prettierのステッカーも配布しておりますので、興味がある方はぜひお立ち寄りください。 まず、Prettierにつ
Next.js 15 RCまとめ
基本的には以下のNext.js 15 RCのブログを翻訳してまとめたものになります。 TL;DR React 19 RC: React 19 RCとReact Compiler(Experimental)、ハイドレーションエラーの改善のサポート キャッシュ: fetchによるリクエストとGETによるRoute Handlers、クライアントナビゲーションのキャッシュをデフォルトで無効化 Partial Prerendering (Experimental): 段階的な採用のための新しいLayoutとPageの設定のオプション next/after (Experimental): レスポンスの後にコードを実行するための新しいAPI create-next-app: デザインのアップデートとローカル開発でTurbopackを有効化するための新しいフラグ 外部パッケージのバンドル (Stable
Google、フルスタックのWebアプリホスティング環境「Firebase App Hosting」パブリックプレビュー開始。AngularとNext.jsをサポート
Googleは日本時間5月15日と16日に開催したイベント「Google I/O 2024」で、Webアプリケーションのホスティング環境を提供する新サービス「Firebase App Hosting」のパブリックプレビューを発表しました。 Firebase App HostingはGitHubと接続することで、開発者がコードをGitHubにプッシュすると自動的にFirebase App Hostingにコードが取り込まれます。 取り込まれたコードはCloud Buildで自動的にビルドが行われて静的なコンテンツがレンダリングされ、動的なコンテンツはCloud Runにデプロイされ、Cloud CDNでコンテンツがキャッシュされることで、自動的にWebアプリケーションがデプロイされます。 対応するフレームワークはAngularとNext.jsです。いずれも手動での設定をすることなく、Fire
React Compiler を試す
はじめに 先日 React Compiler がオープンソース化されました。 ソースコードはこちら。 公式ドキュメントにも React Compiler のページが追加されています。 この記事では React Compiler を簡単に試してみたいと思います。React Compiler の登場背景や詳しい解説などは、公式ドキュメントや React チームのブログを参照してください。(タイトルに React Labs とついているブログで詳しく書かれています) 検証 React Compiler は useMemo や useCallback、React.memo を使わずとも、無駄な再レンダリングを抑制してくれるコンパイラです。それが本当に機能するのか、簡単なサンプルを作成して検証します。 まずプロジェクトを作成します。今回は手軽な Vite を使用しますが、Next.js や Webp
Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す
先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これのホスティング先として最初に検討していたのがFirebase Hostingでした。が、「？SSRどうやって動かすんだ？」と思いながらデプロイのための調査をしていたところ、どうやらCloudRunなどのサーバーサイドランタイムも使いながらでなければ動かせないということに行きつきました。 これまでやってきたCSRのHostingと異なり色々と手間が増えるなという結論に至り、結果初期構築が楽なVercelにデプロイすることにしました。当時の奮
Googleは2024年5月14日（米国時間）、Webベースの統合開発環境（IDE）「Project IDX」のβ版を提供開始した。 GoogleはProject IDX（以下、IDX）を2023年8月に立ち上げた。IDXは、「Google Cloud」上の事前設定済みの仮想マシン（VM）で動作する。開発環境をセットアップする手間をかけずに、フルスタックのマルチプラットフォームアプリケーション開発ができるAI（人工知能）支援型ワークスペースだ。 幅広いフレームワーク（Angular、Flutter、Next.js、React、Svelte、Vueなど）、言語、サービスをサポートし、さまざまなGoogleサービスと連携し、開発ワークフローを効率化できる。開発者は、さまざまなプラットフォームにわたって高品質なアプリケーションを迅速、簡単に構築し、リリースできる。既存のGitHubリポジトリとそ
TSKaigiにて使用した資料です。 https://tskaigi.org/talks/ytaisei_ Reactを用いたSPA開発においてフレームワークの採用は時にtoo muchになります。 しかし、Next.jsやRemixのFiled-Basedなルーティングは開発体験が良いです。 私たちはSPA開発においても型安全でFile-Basedなルーティングを求めています。 今回はそのような状況においてTanStack Routerが有力な候補になることを、その特徴とメリットに触れながら解説します。 次の特徴を紹介します。 - 型安全でシンプルなルーティング - File-Basedなルート生成 - バンドルサイズを軽減するCode Splitting - Search Paramsによる状態管理
この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。 location-stateとは location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。 Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、ブラウザバック時には復元されません。そのため、アコーディオンやform要素の状態はブラウザバック時にはリセットされてしまいます。これはNext.jsに限らず、ReactやVueなどをベースにしたモダンなフロントエンドフレームワークを採用して、クライアントサイドルーティングが発生する場合に起きがちな挙動です。クライアントサイドルーティングが不在なMPAでは、bfcacheやブラウザ側の復元処理によっ
【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ～大草原不可避～」を作りました【Next.js×Rails】 - Qiita
【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ～大草原不可避～」を作りました【Next.js×Rails】Rails未経験個人開発Next.js はじめに こんにちは、とぴ（@topi_log）と申します。 オンラインプログラミングスクールにてRuby on Railsをメインに学習しつつ、自主学習としてフロントエンドも勉強しています。 4/26にメモ帳感覚で使えるGitHub草生やしアプリをリリースしたので、アプリ紹介と技術、感想をまとめさせていただきます。 目次 作成経緯 Webアプリ紹介 技術スタック こだわったところ UI/UX 技術面 その他 改善点・不具合 追加したいと考えている機能 ブラッシュアップの方針 感想 1. 作成経緯 オンラインプログラミングスクールにて、「ミニアプリweek」という短期間でアプリを作るイベントがあります。バグOK
OBSのブラウザソースで動くものを作るあなたへ
MacOSのみ一部バージョンが異なるのは26.1.1リリースのタイミングでブラウザソースがクラッシュする問題が発生し、hotfixとして26.1.2リリースのタイミングでMac版のみアップデートがなされたためです。 このようにバージョンアップのタイミングはまちまちで、XSplitに関しては最近までChrome 68系、OBSについても最新版の30.xでもChrome 103系と執筆現在(2024/04/22)での最新バージョンであるChrome 124から21バージョン遅れをとっている状況です。 これらのアップデートが進まないことの背景には、OBSがCEF経由でページの表示をテクスチャとして使用するためにテクスチャ共有を利用しながら、ゲームなどの他のソフトウェアやキャプチャを使用するためにもテクスチャ共有を利用していることと、CEFがOffscreen Rendering(OSR)時にハー
「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt
東京Node学園 42時限目の App Router Panel Talkです。
Honestly, I'd never thought I'd be writing about this, but the matter of patching globals turned out to be one of those topics that a lot of engineers seem to misunderstand. Most of us don't do monkey-patching, and even fewer stay around those implementations long enough to witness their impact. All the more reason to talk about it. Throughout the next few thousand words, I will be referring to mo
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from client to server. Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because the React context API only works on the client
Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。 諸々調査した結果、解決したので記載しておく。 環境 Vercel Supabase Next.js（１４．x） App Router 解決方法① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // En
Google、AI搭載クラウド開発環境Project IDXのベータ版を待機リストへの登録なしで利用可能に Gootleは2024年5月16日、同社の年次イベント「Google I/O 2024」にて、現在ベータ版として公開されているクラウド開発環境「Project IDX」が、待機リストへの登録不要で利用できるようになったことを発表した。 Start Building with Project IDX Today -Project IDX Blog Project IDXはWebブラウザから利用可能なクラウド上の統合開発環境で、Web、Android、iOSなどのマルチプラットフォームアプリ開発が可能で、アプリをCloud Runにデプロイする。GeminiベースのAIによる開発支援機能も装備されている。Angular、Astro、Flutter、Go、Next.js、Python/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年度】エンジニア向け研修資料まとめ - Qiita
PC-8801mkIISRで「漢字BASIC」を制作、大学の研究室ではApple IIを使用… 杜甫々氏が「とほほのWWW入門」を開設するまで
［速報］Google、Geminiベースの新WebIDE「Project IDX」をオープンベータで公開
OIDCって何なんだー？から、実際に使うまで - BASEプロダクトチームブログ
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Findy転職フロントエンドの開発生産性を向上させるためにやったこと - Findy Tech Blog
最近は意図的にGitHub Copilotを無効にすることがある
Next.jsのSSRF脆弱性 CVE-2024-34351
拡張性に優れた React Aria のコンポーネント設計
Next.js で React Compiler を試しつつ出力コードを見てみる
Server Actions の同時実行制御と画面の状態更新
Next.jsとGoを使っていきます - トレタ開発者ブログ
TSKaigi 2024 Prettierの未来を考える スピーカーノート
Google、WebベースIDE「Project IDX」のβ版を提供開始
TanStack Routerで型安全かつ効率的なルーティングを実現
@location-state/conformをリリースした
Firebase App HostingにNext.jsがデプロイされる仕組み
AppRouter Panel Talk
Why Patching Globals Is Harmful
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
Introducing Pigment CSS: the next generation of CSS-in-JS - MUI
Next.jsでMiddlewareが大量に実行される場合の対処法
Google、AI搭載クラウド開発環境Project IDXのベータ版を待機リストへの登録なしで利用可能に | gihyo.jp