Next.js で React Compiler を試しつつ出力コードを見てみる

2024/05/24 14 users React Compiler beta フレームワーク 単体

React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、という... 続きを読む

Next.js 15 RC

2024/05/23 9 users experimental React

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, an... 続きを読む

Next.jsのSSRF脆弱性 CVE-2024-34351

2024/05/18 5 users SSRF SSRF脆弱性 サーバー 脆弱性 本来

Next.jsでSSRF（=Server Side Request Forgery）の脆弱性が発覚したことが社内で話題になったので、まとめておこうと思います。対象の脆弱性は以下です。 脆弱性の概要 SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です。 今回のNext.jsの脆弱性... 続きを読む

Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す

2024/05/18 13 users SSR angular Firebase リポジトリ 過去

先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これ... 続きを読む

@location-state/conformをリリースした

2024/05/16 7 users useState 状態 状態管理

この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。 location-stateとは location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。 Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、... 続きを読む

Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita

2024/05/11 58 users Qiita shadcn RSC Reactコンポーネント

Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも... 続きを読む

[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO

2024/05/09 18 users layout TSX DevelopersIO 西村祐二 タブ

[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを... 続きを読む

巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32

2024/05/02 23 users React wip Qiita TLDR フレームワーク

(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」... 続きを読む

GitHub - openai/openai-assistants-quickstart: OpenAI Assistants API quickstart with Next.js.

2024/05/02 11 users GitHub OpenAI

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 続きを読む

Next.js 型安全なルーティングを使う

2024/04/28 80 users ルーティング typo エラ エラー 型検査

Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラ... 続きを読む

Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に

2024/04/17 6 users React Vercel Turbopack ルーティング

Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に Vercelは同社が開発するWebアプリケーションフレームワークの最新版となる「Next.js 14.2」の正式リリースを発表しました。 Next.jsは、ReactをベースとしたオープンソースのWebアプリケーションフレームワークです。ルーティングやサ... 続きを読む

Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて

2024/03/28 12 users 実践 書評 ドキュメント 見本誌 2024-03-28

Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習... 続きを読む

[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする

2024/03/19 98 users ビルド Twitter 本番環境 開発環境 開発中

はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なので... 続きを読む

Next.jsのlayout.tsxで認証チェックすると情報漏洩するかも

2024/03/12 13 users layout.tsx 情報漏洩 ゲー 実装 肥大化

Next.jsの認証チェックどこでするか問題 基本的には middleware.ts で行うと思うのですが、肥大化を避けたり、ちょっとした共通処理は layout.tsx に書くこともあるでしょう。今回は layout.tsx で認証チェックをした場合に、実装によっては意図せず認証ユーザにしか表示したくない情報が漏洩してしまうかもしれないケー... 続きを読む

React Server Componentの実行順序とフレームワークでの注意点

2024/03/09 12 users フレームワーク 実行順序 RSC layout TSX

前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」というこ... 続きを読む

【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita

2024/03/08 28 users HTML クライアント サーバー リクエスト ＣＳＲ

Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることによ... 続きを読む

フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代

2024/03/07 135 users 変遷 フロントエンドパフォーマンス 時代

こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしていた記述を削除 ・レガシーMPA + Ajaxについて、初回表示に関する言及... 続きを読む

【30歳/完全未経験/独学】webアプリを作製しました【Golang, Next.js, MySQL, Docker, GitHub Actions CI, AWS Fargate on ECS】 - Qiita

2024/03/04 25 users Qiita Docker golang API figma

完成物 ER図 画面遷移図 figma, 原寸画像 AWS構成図 ※備考※ GitHub Actions CIは構築済みです。 GitHub Actions CD, apiのprivate subnet化にも取り組んでいます。 EC2インタンスは通常時停止です。 技術選定理由 プログラミング、IT業界ともに未経験で着手し独学で作りました。 Go 比較対象：JAVA、Ruby、Python等 コン... 続きを読む

Re: Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）

2024/03/05 7 users layout.tsx children 用途 整理 自身

自分も同じ道を辿ってきて今はちょっと考え方が変わっているので自身の整理がてらmeijinさんの記事に乗っからせていただきます🙏 Re: 「A layout is UI that is shared between routes.」って書いているのでめっちゃめちゃ違う用途じゃないか？ export default async function Layout({ children }: { children: ReactNo... 続きを読む

実践Next.js - App Router への理解を深めるために -

2024/02/28 28 users App Router 本稿 刊行 サンプルコード 書籍

Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています... 続きを読む

Server Actionsにユーザ操作されたくないデータは渡さない

2024/02/27 6 users Server Actions Hidden input タグ

Next.jsやServer Actionsに限らずWebアプリケーション一般的な話になりますが、機能開発する際に、ユーザに勝手に操作されたくないデータを <input> タグを通じて受け取ることは避けなければなりません。 例えば、極端な例ですがECサイトで商品の価格を <input type="hidden" name="price" value="500" /> と書いてあっ... 続きを読む

ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."

2024/02/26 229 users Reactアプリ ssig33 最小限 astro Remix

最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもS... 続きを読む

type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform

2024/02/18 5 users プログレッシブエンハンスメント React 標準 web 特徴

type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform 2024.02.18 Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Ac... 続きを読む

Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた

2024/02/17 6 users microCMS ヘッドレスCMS API プロセス 実装自体

技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記... 続きを読む

プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話

2024/02/14 21 users フルリプレイス App Router コンソール画面 ＣｉＵ

CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後 ・なぜNext.jsを使うのか ・古いNext.js製サービスをどのようにApp Router化したのか 以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお... 続きを読む