Next.jsのPPR + StreamingがVercelで実行されるときの全体像を掴む
こんにちは。sumirenです。 イントロダクション 先日、Next.js 15 RCが出ました。App RouterでPartial Prerenderingが広く使われ始める日も近いのではないでしょうか。 Partial Prerenderingは、特にStreamingと一緒に利用し、Vercelにデプロイした場合、強力に最適化が行われます。最適化は非常に高度で、部分的な静的レンダリングといったアプリレイヤから、エッジとオリジンの使い分けといったインフラの構成まで絡む複雑な設計です。最終的にVercelにデプロイされた後の全体の動作イメージが頭に入っている方は少ないのではないでしょうか。 この記事ではPartial PrerenderingとStreamingについて、Vercelデプロイ後の動作イメージがついている状態を目指します。静的ルートやサーバーサイドフェッチなど単純な例から
年間リリース1,100回！完全リモート開発環境！開発生産性の高め方をHRBrainのCTOに聞いてきた
人事領域に関するプロダクトを多数展開しており、HRTech企業の雄として名高いHRBrain社。年間のリリース回数はなんと1,100回！どうやってそんな開発生産性を実現しているのか、CTOの鈴木悠大さんにお話を伺ってきました。 ブランチデプロイ環境とは ──今日はお話を伺えるのを楽しみにしていました。まずは自己紹介をお願いできますか？ 株式会社HRBrainの執行役員CTOをしております鈴木です。技術本部長を務めており、複数プロダクトのテックリードも兼務しています。 ──事前に伺っていたところによると、御社では特に開発生産性を高めることに注力されているとか。 そうですね、色んなことをしていますが、まずはリリースのワークフローはかなり工夫しています。一つは、社内で「ブランチデプロイ環境」と呼んでいる環境は、生産性の向上にかなり寄与しているかと思います。 ──それはどのようなものですか？ プル
話題の画像生成AI「FLUX.1」 人気サービス「Midjourney」との違いは (1/3)
画像生成AIの話題を席巻している、Black Forest Labs（BFL）の「FLUX.1」。画像生成AIの新世代モデルとしてコミュニティーの強い支持を集めつつありながら、モデルそのものはVRAMがリッチでないと十分に使えないという条件のため、ユーザーのシフトをにらみ、各社が一斉に公式APIを使ってのFLUX.1へのクラウド対応を進めビジネス化を図ろうとしている印象です。BFLが成功するためには何が重要なのでしょうか。 クラウドサービス化していくFLUX.1 FLUX.1を使った画像生成AIサービスが次々に立ち上がってきています。たとえばその1つがFlux AI Image Generator。FLUX.1の各種モデルで画像生成できるようになっています。面白いのが「Flux AI 画像プロンプトジェネレーター」という機能を備えているところ。「猫」とテキストを入力すると（日本語でも可）、
React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
React Server Component、そしてqwikのインパクト ー フロントエンドアーキテクチャの最新動向をmizchiさんに聞いてきた(1)
こんにちは、テックフィード白石です。 日本のエンジニア界隈をリードするエキスパートに、テクノロジーの最前線を語っていただくYouTube動画連載「Ask the Expert」の新着動画が公開されました！ 今回は、フロントエンドのエキスパートmizchiさんに、フロントエンドの最新動向について詳しく伺ってきました。 mizchiさんのアカウントをぜひフォローしましょう！ mizchiさん（フロントエンド兼Node.jsエンジニア） ついでに白石のもフォロー推奨: 聞き手: テックフィード白石 以下に掲載するのは、インタビュー動画の内容の要約です（正確な書き起こしではありません）。 内容をフルにご覧になりたい方は、ぜひ動画をご視聴ください。 ご質問、ご感想などはYouTubeのコメント、もしくはこの記事のコメント欄でも受け付けております。どしどしお寄せください😊 以下、動画の内容の要約です
React のルール – React
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。 以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac
サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog
こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ
2023年の話題＆ベストセラーをまとめて紹介！ Udemyで今年最大級のセール開催、生成AIなど対象講座が1,200円より - はてなニュース
世界中を席巻した生成AIは、ブームに終わることなく着実に社会のさまざまな場面で利用が進んでいます。特にChatGPTを始めとするテキスト生成はビジネスシーンですぐに適用可能なケースも多く、使いこなす人とそうでない人には大きな差が生じつつあります。 使いこなすノウハウにも一定の知見が貯まっており、定番となるセオリーが整理されています。正しく学ぶことができれば一気にキャッチアップできるでしょう。Udemyの講座でも、ChatGPTを使いこなすプロンプトの作法や、アプリケーションにLLM（大規模言語モデル）を組み込むノウハウ、AIをより深く知る数学知識などに人気があります。 この記事では、2023年11月17日（金）に始まるブラックフライデーセール（24日まで）、そして26日（日）から2日間のサイバーセールの対象になる人気講座から、エンジニアリングやビジネスシーンにおいて読者の成長を助けてくれる
Next.jsのStatic Exportsを本番プロダクトで利用してみた感想と注意点 - Tabelog Tech Blog
目次 はじめに Static Exportsとは Static Exportsを採用した経緯 Static Exportsを利用する際の注意点 Dynamic Routingが使えない 対策 運用してみての感想 まとめ 最後に はじめに こんにちは。食べログ ウェブ開発部 FEチームの原田です。 昨年リリースした食べログノートではNext.jsを利用しており、Static Exportsを採用しています。 今回は食べログノートでStatic Exportsを採用した経緯や採用するための注意点、実際に運用してみての感想をお伝えします。 食べログノートの詳細については以下の記事も是非ご覧ください。 https://note.com/tabelog_frontend/n/na9a2ce24a4d5 Static Exportsとは Static Exportsとは、Next.jsのウェブアプリケ
Next.js(最新version)でChatGPTのCloneアプリを作成してみた。(Gitで確認できます) - Qiita
Next.js(最新version)でChatGPTのCloneアプリを作成してみた。(Gitで確認できます)PythonJavaScriptVue.jsReactChatGPT ChatGPTをゼロから作ってみた 作成したアプリの画像 下記でアプリを実際に動かせるのでよかったら確認してみてください。 ChatGPT-Clone-AppのURL プロジェクトはGitで管理してますので、クローンして使ってみてください。 chat-gpt-clone-appのGithubリポジトリのURL 自己紹介 お久しぶりの投稿です。本業と個人の仕事で忙しく1年振りの投稿になります。 株式会社DYMのエンジニアをしております、永松です。 普段はインフラはAWSを使い、Python(FastAPi), Golang(net/http), PHP(Laravel), TypeScript(Nuxt.js or
Open Interpreterを使ってReactプロジェクトを自動生成してみた - Taste of Tech Topics
こんにちは、最近アニメ「葬送のフリーレン」を観て、漫画を全巻購入してしまった安部です。 今回は、Open Interpreterを使ってみます。 Open Interpreterは、ChatGPTのAdvanced Data Analysis（旧Code Interpreter）のように、プロンプトから判断して自動で処理を実行するという動きを、ローカル環境で実現してくれます。 ローカル環境で動くため、ディレクトリに置いてあるファイルを読み込ませたり、ファイルを特定の場所に出力させたりできます。 今回は、OpenAI のAPIで、gpt-3.5-turboを利用していますが、API Keyを持っていない場合は、Metaが公開した大規模言語モデル（LLM）である「Code-Llama」が自動でダウンロードされて利用できるようになります。 Open InterpreterのChatGPTとの一番
新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題 - ZOZO TECH BLOG
こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ投稿・成果確認などの機能が存在し、2022年8月に正式ローンチしました。詳しくは以下のプレスリリースをご覧ください。 corp.zozo.com 現在FAANSは立ち上げから2年経過し、Webフロントエンドの開発現場において様々な組織的・技術的課題がありました。 今回はその課題と取り組みについて紹介したいと思います。 目次 目次 前提 FAANSの組織の特徴 FAANSのWebのプロダクトの特徴 変化の多い環境下で遭遇し続ける課題 組織的・技術的課題とそ
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上 Reactベースのサーバサイドフレームワークとして知られるNext.jsの最新バージョン「Next.js 13.5」正式版がリリースされました。 使用メモリの削減、ローカルサーバの起動高速化などの強化が行われています。 Next.js 13.5 22% faster local server startup 29% faster HMR (Fast Refresh) 40% less memory usage Optimized package imports `next/image` improvements And over 438 bugs patched!https://t.co/edW10gB19X — Vercel (@vercel) Sept
ReactカスタムフックからヘッドレスChromeまで！リアルタイム静止画編集機能の作り方を、リチカのエンジニアに聞いてきた
――現在、どんなプロダクト開発に従事していらっしゃいますか？ 杉本：誰でもかんたんにマーケティング動画や静止画を作れるWebサービス『リチカ クラウドスタジオ』を開発しています。 『リチカ クラウドスタジオ』は、業種別や配信媒体別の数多くのフォーマット（型）をベースに、クオリティの高い動画を誰でもかんたんに作成できるのが特徴です。当社は元々制作会社だったため、社内にプロのクリエイターが多数在籍しているので、彼らによって制作されるフォーマットが大きな強みのひとつです。 朝賀：昨年後半からは、『リチカ クラウドスタジオ』の新機能の開発プロジェクトが進行していて、現在は主にそちらの開発に従事しています。 ――どのような新機能か、伺ってもよろしいですか？ はい、大きく分けて2つありまして、静止画のリアルタイム編集機能と、比率違いの静止画を一括制作できる機能です。 これにより、ブラウザ上で作成したイ
フロントエンド領域でチームをリードしたいエンジニア募集中！
フロントエンド領域でチームをリードしたいエンジニア募集中！ 株式会社カオナビ @kaonavi React TypeScript Web Standards / Browsers CSS JavaScript I want to hear a detailed 株式会社カオナビでは、場所と時間に縛られない、新たな働き方制度「MY WORK STYLE」を始めています。 働く場所の選択（出社 or 自宅 or 許可された就業スペース） スーパーフレックス制度 スイッチワーク制度 などなど、詳しくはこちらをご確認ください！ 「場所と時間に縛られない、新たな働き方制度 MY WORK STYLE を開始」 https://corp.kaonavi.jp/news/pr_20201201/ 【募集概要】 自社サービスのタレントマネジメントシステム「カオナビ」において、新機能開発や機能拡張の実装、パ
【React/Python】２年がかりで完成した個人開発サービスの話【ChatGPT】 - Qiita
個人開発でサービスを作り始めて、気がついたら２年も経っていました。 気軽な気持ちで作り始めたのですが、思いの外色々なことに手を出してしまったので、 利用した技術などをまとめてみます。 作ったもの YouTubeのライブ配信風の画面に向かって話しかけると、 音声を認識してAIがスーパーチャットを送ってくれる、 その名も「AIスパチャ」です。 良かったら遊んでみてください。 作るきっかけ YouTubeでひろゆき氏の配信を見ていた時に、 「私もひろゆきさんみたいに質問回答の配信をやってみたいです。 けれどいざ配信をしてみても視聴者が少なく、質問なんて全くきません」 といった質問がありました。 確かに、ひろゆき氏のように、何千人も視聴者がいて、ガンガンとスパチャが送られてきたらそりゃ楽しいですが、 普通の人はまずスパチャなんて送られません。 そもそも実際にYouTubeライブをやることのハードル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【西川和久の不定期コラム】 生成AI画像の写真はもはや実写レベルに！？話題のFLUX.1で顔LoRAを作ってみた
元Stable Diffusion開発チームによる高性能画像生成AI「FLUX.1」、Perplexity精度のオープンソース検索AI「MindSearch」など生成AI技術5つを解説（生成AIウィークリー） | テクノエッジ TechnoEdge
