useFormState から useActionState に移行する
はじめに useActionState とは useFormState に取って代わる新しい React Hooks です。 既存の useFormState の問題点を解消するために導入されました。 useFormState useFormState とは渡されたアクションの結果に基づき state を更新するためのフックです。 const [state, formAction] = useFormState(fn, initialState, permalink?); このように useFormState にアクションと初期 state を渡すことにより、フォームが送信された後のアクションの返り値と <form> や <button> に渡せる新しいアクションを取得できます。useFormState は <form> 内でなくても使用できます。 import { useFormStat
Next.js App Router / React Server Components(RSC)を紐解いてみた - estie inside blog
デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstableとしてリリースされ、App Routerが登場しました。 ツリー構造でのファイル配置が基本となりました。 ディレクトリ構成とルーティング page単位・feature(機能)ごとに切り分けたディレクトリ構成が可能になったため、より直感的で再利用性の高い構造が実現しました。 // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ └
Server Actions時代のformライブラリconform
conformはプログレッシブ・エンハンスメントを意識して作られたReactのformライブラリです。 RemixやNext.jsなどのフレームワークをサポートしています。react-hook-formのServer Actions対応は現状検証段階なのですが、conformはすでにServer Actionsにも対応しています。 本稿ではNext.js(App Router)におけるconformの使い方を中心に紹介します。 Server Actions もう散々他の記事や公式ドキュメントで紹介されていますが、簡単にServer Actionsについて復習します。 基本的な使い方 Server Actionsはクライアントサイドから呼び出すことができる、サーバー側で実行される関数です。 この機能の最も一般的なユースケースは、サーバー側のデータを変更する際に呼び出すことです。ReactはJ
Loading.tsxはServer Action中に待機画面を表示しない【NextJS】
Server Actionで状態遷移するベストプラクティスが知りたい フォーム入力 データベース更新 画面更新 というよくある黄金シナリオを考えます。 NextJSはSSR Frameworkなので可能な限りServer Componentを利用することを推奨しています。しかしServer ComponentではHooksが使えません。 これまでのようにAPIを叩く→State更新→画面再レンダリングという黄金のパターンは使えなくなります[1]。そこでhooksに頼らずにデータの更新と再レンダリングを行う新しいNextJSのメンタルモデルに適応する必要があります。 公式ドキュメントでおすすめされる１つの方法はServer Actionを使うことです。今日はこのあたりのベストプラクティスについて備忘録としてまとめます。 Server Action Server Actionとはサーバーサイド
Next13でNextAuthを使いつつログインフォームを作ってみた
今回やること 前回Next13の新機能ServerActionsを使ってユーザー登録を作ったので、ログインフォームを作っていく。 認証部分は（初めてだけど）NextAuthを使う。 Nextで実装できる箇所についてはNext側で実装していくためNextAuthはログインでの認証のみ実装。 作ってみた 流れと実装方法 実装の流れ NextAuthでログインの処理 ログインしているかどうかでヘッダーの内容を変更 セッションからユーザーのIDを取得しServer側でユーザーデータを取得する 本編とは逸れるのでここに記載するが今回からNextUIとReactIconsを導入。 導入方法は割愛するので各ドキュメント等参照。 NextAuthの準備 NextAuthについて。 認証機能をNextに実装できるライブラリ。 インストール まずはドキュメントに合わせてインストールしていく。 import {
How to Build a Full-Stack Multi-Tenant App Using Next.js
How to Build a Multi-Tenant App with Custom Domains Using Next.js In this guide, you'll learn how to build a full-stack multi-tenant application by using the Platforms Starter Kit and the following technologies: Next.js App Router as the React frameworkTailwind for CSS stylingTremor for beautiful chartsPrisma as the ORM for database accessNovel for the WYSIWYG editorVercel Postgres as the database
【React】複数ページに分割し進捗を表示する入力フォームの設計
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
Next.jsディレクトリ構成・設計再考（featuresが何を解決するか）
初めに 最近自分がNext.jsをやる案件がとにかく増え、ディレクトリ構成が固まってきたのでここに置いておきます。 何か意見あれば是非いただけると嬉しいです。 個人的に最近流行りのfeaturesはやりすぎだと思っていたのですが、結局開発していくとfeaturesのようなディレクトリを切った方が合理的な場面が多々出てきたのでこうなった次第です。 設計時に参考にした記事 こちらのReact TypeScript Cheatsheetに、Recommendationとして載っているbulletproof-reactを参考にしました。 構成 例として飲食店のウェブサイトで、コース（course）という機能を持たせるとする。 ├─ components/ │ ├─ elements/ │ │ └─ Button │ │ ├─ Button.stories.tsx │ │ └─ Button.tsx
Next.jsでホワイトリスト形式のIP制限をかける
概要 Next.js（v13.4.12）の環境でMiddlewareを利用してIP制限をかける方法を共有します。 サンプルコード import { NextRequest, NextResponse } from 'next/server' // IPホワイトリスト const IP_WHITELIST = ['xxx.xxx.xxx.xxx', 'yyy.yyy.yyy.yyy']; // IPアドレスをマスクしています。 export async function middleware(request: NextRequest) { const res = NextResponse.next(); // IPアドレスを取得 let ip: string = request.ip ?? request.headers.get('x-real-ip') ?? ''; // プロキシ経由の場
Jestを使ってReact Hook Form + Yupのテストをする
React Hook FormとYupを使ったフォームのテストをJestで書いてみました。 Reactを使ったフォームのレンダリングは行わずに、フォームのロジックのみをテストします。 フォームに値をセットして、フォーム送信時に使われる handleSubmit で出力される最終データをチェックします。 スキーマ定義によって出力データが意図しない結果になるバグがあり、コンパクトに検証するために作成したテストです。 testing-libraryのrenderHookを使って React Hook Form のフォームへのアクセスを得る 今回は Testing Libraryを使って React Hook のテストを行います。 React Hook Formはフォームの状態管理を行う useForm というカスタム・フックを提供しています。 renderHookでuseFormをレンダリングし
Next.jsでCSRF対策を簡単に実装する方法 - 動かざることバグの如し
環境 Nextjs 13 edge-csrf 1.0.3-rc1 TypeScript 5 やりたいこと 今日は、Next.jsの開発について書こうと思います。Next.jsは、開発がとても便利であることがよく知られています。 しかし、CSRFトークンの機能がRailsのようにネイティブで用意されていないため、自分で実装する必要があります。 これは面倒ですが、edge-csrfというライブラリを使えば簡単にCSRFトークンの実装ができます。先日、私自身もこのライブラリを使ってCSRFトークンの実装を行い、スムーズに開発を進めることができました。 今回はそのメモ https://github.com/amorey/edge-csrf インストール npm install edge-csrf yarn add edge-csrf ミドルウェアの追加 APIのエンドポイントごとにCSRFの実装す
Next.js環境でのPWA(Progressive Web App)の導入手順
PWA(Progressive Web App)とは？ PWAとは、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用し、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。 簡単に言ってしまうと、ウェブアプリでありながらネイティブアプリのように使用できるようにする機能です。 PWAは、通常のウェブアプリのように、HTML、CSS、Javascript等で構成されます。 また、下記のようなメリットがあります。 通常のウェブアプリよりも高速 インストール可能 どのブラウザでも動く オフラインでも閲覧可能 プッシュ通知を送れる・受け取れる これを用いられているウェブアプリを例としてご紹介すると、Twitterです。 PCのChrome上では検索ボックスの右側にPCに下矢印のマークが表示されます。 これをクリックすると、ポ
Next.js + VercelとSentryを連携させる
概要 Next.js + Vercelで運用しているアプリケーションにSentryを連携させる手順を説明します。 今回は実際に自分が 友人 と開発・運用しているサービス LGTMeow にこれらの設定を追加したので、実際の設定内容を踏まえて解説します。 対象読者 Next.jsのアプリケーションをVercelにデプロイしている人を対象読者としています。 事前準備 Sentryへサインアップ 以下のページからサインアップを行ないます。 自分はGitHubのアカウントを利用して作成しました。 Sentry organizationの作成 以下のページより作成します。 自分はGitHub Organizationと同じ名称で作成しました。 Sentry プロジェクトの作成 プロジェクトを作成します。 プラットフォームを選択でNext.jsを選択 Set your default alert se
【Middleware使用】Next.js12でBasic認証を導入（ローカル,vercel 両対応） | tech-broccoli.life
Next.jsのversion12から Middleware と呼ばれるものが導入されました。 Middlewareについて簡単に書くと、 pagesフォルダの特定フォルダ配下に _middleware.js(tsももちろんOK)を配置すると リクエスト完了前に実行してくれる、というもの。 ユーザーのリクエストをもとに、レスポンスの書き換え、リダイレクト、ヘッダーの追加、HTMLのストリーミングなどをおこなうことができます。 Middleware | Next.js より引用（DeepL翻訳） Next.js ver11まで_app.tsxでBasic認証を設定する方法が一般的なイメージでしたが
Next.jsをVercelでデプロイして、Previewだけにbasic認証をかける…必要はあるのか？
筆者はvercel、middlewareを理解できてないので、このやり方が良いのかどうか、安定して動作し続けるのかなどは未検証です。2022年2月現在、vercel上で動作しているのは確認済みです。 これやる必要ある？ みたいなものなんですけど。 思いついて試してみたら動いたのでメモっておきます。 多分もっと良い方法があると思いますし、真剣にセキュリティ的なことを考えるのならば、vercelの有料のパスワード機能を使うべきなのではと思ったりします。 あと、vercelの使い方なども試しきれてないので、探り探りになっていて冗長な記事です。間違っている部分も多いかもしれません。参考程度に読み流してもらえるとありがたいです。 Next.jsのMiddleware Next.js v12からMiddlewareというものが実装されました。 色々使えます。 middlewareはリクエストが完了する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using Vercel Edge Config to handle Maintenance Mode in NextJS applications
NextJS 13 folder structure best practice
Next.jsでrewritesを使うと全く関係ないページで再レンダリングが発生する
Next.js Practical Introduction Pt. 3: Navigation and Routing