Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
巷の「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 フレームワークなし 【フレームワークあり】
株式会社 CoeFont でフロントエンドエンジニアをしている uzimaru です。 Next.js の Middleware で Hono を使ってみたのでそれについて記事にまとめます。 モチベーション Next.js の Middleware はアプリケーションに1つだけしか設定出来ず、どの path で実行するかの設定も config を使って正規表現や Header, Cookie を指定して設定するかリクエストの pathname を見て処理を分岐する必要があります。 シンプルな実装のみなら良いのですが、path によってログインしているか確認したい、いくつかの処理を Middleware で適応したい、というように要件が複雑になると管理が大変になっていくと思います。 そこで、Hono のようなシンプルなフレームワークを Middleware で動かして実装をシンプルにしようと
東京Node学園 42時限目の App Router Panel Talkです。
ServerAction で Progressive Enhancement はどこまで頑張れるか？ / progressive-enhancement-with-server-action
Node学園 42時限目 Next.js AppRouterについて https://nodejs.connpass.com/event/315443/
Next.js App Router
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
Next.js 型安全なルーティングを使う
Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim
ちょっとした React Server Component 小ネタ。 Next.js (webpack, Turbopack) で確認しているが、おそらく RSC に対応しているツールであったらどれも変わらないはず。 アプリケーションの package.json の imports セクションに以下のように記載しておく。util の部分は好きな文字列で構わないが # から始めておくこと。 { "imports": { "#util": { "react-server": "./src/util.react-server.ts", "default": "./src/util.default.ts" } } }React Server 環境とそれ以外の環境用、それぞれの実装を用意する。 とりあえず結果が異なることを確認したければ以下のような感じ。 /* ./src/util.default.
CSS in React Server ComponentsUnderstanding the future of CSS-in-JS and React IntroductionAround this time last year, Vercel announced the stable release of Next 13.4, becoming the first React framework to be built on top of React Server Components. This is a big deal! RSC (React Server Components) gives us an official way to write server-exclusive code in React. It opens a lot of interesting new
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
Next.js 14.2
Next.js 14.2 includes development, production, and caching improvements. Turbopack for Development (Release Candidate): 99.8% tests passing for next dev --turbo. Build and Production Improvements: Reduced build memory usage and CSS optimizations. Caching Improvements: Configurable invalidation periods with staleTimes. Error DX Improvements: Better hydration mismatch errors and design updates. Upgr
Next.js 製アプリケーションの CI の実行時間削減や安定性向上のために取り組んだこと - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、画面刷新を進めていく中で CI の実行時間が長く不安定になってしまい、開発生産性に大きな影響が出ていました。今回の記事では、CI の課題改善のために取り組んだことを紹介します。 目次 DOGO について CI を改善することになった背景 CI の改善のために取り組んだこと ビルド時に tsc を実行しない .next/cache を除いて、artifacts にアップデートする E2E テストをより多くの shard 数で分割する Playwright のブラウザのインストールをキャッシュする PR ではコード差分に関連するテストのみを実行する Hydration の挙動によってテストが flaky になっていた問題の解消 CI の改善の結果 今回取り組ま
概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 Base path の設定あり App Router と Pages Router が共存している Base Path について Base Path の設定は next.config.js に以下のような記載があると、 module.exports = { basePath: '/base', } /pages/examples.tsx で配置したページコンポーネントが、 URL /base/examples で閲覧できるようになるものです。 また以下のような Link コンポーネントは、自動的に Ne
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/
こんにちは！@Ryo54388667です!☺️ 普段は都内でフロントエンドエンジニアとして業務をしてます！ 主にTypeScriptやNext.jsといった技術を触っています。 今回はレスポンスの遅いAPIをリクエストしたときのローディングUIを紹介したいと思います。 📌 作ろうと思った背景 きっかけは生成AIのエージェントAPIを利用するとき、レスポンスを待つ時間が非常に長かったからです。。😇 生成AIのプロダクトではプロンプトを解析したり、最適な問い合わせ先を判断したり、オリジンにリクエストするなど、さまざまな処理を行う(オーケストレーションレイヤー)関係でレスポンス時間が遅くなることがあります。これをなんとかしたいと思ったのがきっかけです。 昨今の開発では、UXをいかに上げるかが求められているように感じます。できることが格段に上がったとしても、UXが悪くて利用されなくなっては本末
この記事では、Next.js Middlewareのテストコードを書く方法を紹介します。Middlewareはリクエスト時に最初に処理されるパーツで、認証やリダイレクトなどに使われます。パスやCookieなどに応じて分岐するため十分にテストをしないと意図しないリクエストを受け入れてしまう可能性があります。 今回はユニットテストを使ってMiddlewareの動作確認をしていきます。 まずはテスト対象のMiddleware 以下は高階関数を用いて、2つの処理を結合しているMiddlewareコード例です。 IPアドレスのアクセス制限 restrictIp リダイレクト処理 redirectAccountsPath ちなみに今回は高階関数で書いていますが、必ずしも高階関数である必要はありません。素朴に書いてもテストコードは書けます。書きやすい方で問題ありません。 import { type Ne
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
Pioneering web solutions with a modern, agile approach.
The Future of Page Router · vercel/next.js · Discussion #56655
Hello, I've been working on completing and maintaining the products at the company I'm currently with, using the page router. I find great joy in creating products through the page router and, additionally, I'm excited about the possibility of server-side rendering (SSR). Utilizing features like getServersideProps allows for sufficient implementation of server-side actions. However, as I migrate t
MOAI.JAPAN🇯🇵@ニートの王👑 @MOAI_TOKYO 宣伝じゃないんですが最近肺炎球菌ワクチンの接種率がかなりおちてるので（昔は40％いってたのですが今はコロナ禍の影響か10％台😓）、ワクチン打てそうな患者さんにはおすすめお願いします。自分のとこではインフル後の肺炎（肺炎球菌が多い）が増えてる気がします。msdconnect.jp/products/pneum… pic.twitter.com/oiyESkEJH0 2024-03-20 20:44:35
はじめに この記事について こんにちは、 @zomysan（Twitter） です。この記事では、Next.js で開発をしているWebアプリケーションのフロントエンドを対象に、開発途中のページをどう扱うかということについて書きます。 新しい機能やリニューアルのための開発を始めてあたらしいページを追加したものの、まだ途中なのでユーザーに見せられる状態ではない、ということはよくあると思います。ユーザーには見せたくないけど、開発環境やステージング環境では確認したい。でも本番環境には出したくない。そういうときどうしたら良いのでしょうか？ この記事の対象 この記事は以下のような人を対象としています。 Next.js で Web アプリケーションを実装している 開発中のページを本番環境に露出したくない まとめ 今回、私は以下のように実現してみました。 開発中のページについて、拡張子を .page.d
![[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする](https://cdn-ak-scissors.b.st-hatena.com/image/square/8936786543ce5934ebbc3c8138bd1c9ca40bc4ae/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--WkL-5h-l--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520%2525E9%252596%25258B%2525E7%252599%2525BA%2525E4%2525B8%2525AD%2525E3%252581%2525AE%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E3%252582%252592%2525E9%252596%25258B%2525E7%252599%2525BA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525A7%2525E3%252581%2525AE%2525E3%252581%2525BF%2525E8%2525A1%2525A8%2525E7%2525A4%2525BA%2525E3%252581%252597%2525E3%252580%252581%2525E6%25259C%2525AC%2525E7%252595%2525AA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E3%252581%2525AE%2525E3%252583%252593%2525E3%252583%2525AB%2525E3%252583%252589%2525E3%252581%2525AB%2525E3%252581%2525AF%2525E5%252590%2525AB%2525E3%252582%252581%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Azomysan%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4Mjg2YmNjMDEuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ASocial%252520PLUS%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUxYTI1OGI3MTQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
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
コスパ良すぎ。デルの7.3万円ノートPC、大学生みんな買うべきじゃない？2024.03.13 11:0095,324 小暮ひさのり これ、絶対お買い得だと思うの。 間もなく4月。新生活に備えてノートPCを買わねば…。みたいに考えている人や保護者の皆さんも多いと思います。じゃあ、どれを買えばいいの？ となりますよね。まさにその問題を投げかけられました。 発端は僕の馴染みのコンビニ店員のお姉さんから｢大学用のPCを探しているんですが、予算10万円でなんとかなりますかねー？｣と聞かれたこと。 その時は｢大学4年間まともに使おうと思ったら、15万円くらいからですかねぇ｣と返しました。僕的には、快適なライン（メモリ16GB・ストレージ512GB）を満たすPCは、やっぱり15万円からという認識があったんです。 …が。その後気になって調べてみたら、すげえコスパ良いPC見つけちゃった。DELL（デル）です
Next.jsの認証チェックどこでするか問題 基本的には middleware.ts で行うと思うのですが、肥大化を避けたり、ちょっとした共通処理は layout.tsx に書くこともあるでしょう。今回は layout.tsx で認証チェックをした場合に、実装によっては意図せず認証ユーザにしか表示したくない情報が漏洩してしまうかもしれないケースを紹介します。 問題のあるコード import { redirect } from "next/navigation"; export const dynamic = 'force-dynamic'; function currentUser() { // ここでセッションデータから認証ユーザ情報を取得する関数 // デモ用にログインしていないユーザを再現したいのでfalseを返す return false; } export default fun
江草陽太 大阪府生まれ。ネットワーク、データベース、情報セキュリティのスペシャリスト。 洛星中学・高校のロボット研究部創立メンバー。ロボカップジュニアジャパンなどのロボコンに出場。 その後、大阪大学工学部電気電子情報工学科に進学。NHK大学ロボコンに出場。学生時代より個人事業としてシステム開発を行う。 2014年10月、新卒採用によりさくらインターネットに入社。「さくらのVPS」等のバックエンド開発を担当。IoTプラットフォーム「sakura.io」の開発責任者を担当し、サービス設計と開発を行う。 2016年7月、執行役員に就任。現在は、さくらインターネット全体の技術統括とコーポレートIT、情報セキュリティを担当。宅急便をSlackから発送できるサービスを開始するなど、コーポレートITに関わるDXのサービス化も行っている。 新卒2年目のJavaエンジニアです。コロナ禍のリモート仕事しか知ら
急傾斜地の崩壊土砂から人家などを守る待ち受け擁壁が、滑動や転倒に対する安全性を確保できていなかった。「擁壁工指針」に対する理解不足や図面作成時の勘違いなど、原因は基本的な誤りにあった。 福島県と青森県がそれぞれ整備した待ち受け擁壁で、会計検査院から基本的な設計ミスの指摘があった。 福島県の待ち受け擁壁は2018～19年度に、いわき市に建設した（資料1）。設計は、県が委託した建設コンサルタント会社が担当した。 この擁壁は、高さが異なる複数の無筋コンクリート製擁壁で構成する。総延長72.2mのうち、問題が判明したのは高さ3m、延長18.7mの擁壁だ。 検査院の調査官は実地検査でまず、滑動に対する抵抗力の算定プロセスで誤りがあると気づいた。 県が設計の基準とした「道路土工─擁壁工指針」（日本道路協会）では、「滑動に対する抵抗力は、擁壁の底面と地盤との間の付着力に、擁壁底面の有効載荷幅を乗じて算出
JSON Canvas
An open file format for infinite canvas data. Infinite canvas tools are a way to view and organize information spatially, like a digital whiteboard. Infinite canvases encourage freedom and exploration, and have become a popular interface pattern across many apps. The JSON Canvas format was created to provide longevity, readability, interoperability, and extensibility to data created with infinite
CursorでClaude3を使う
を使うとできます。OpenRouterはopenaiと同じAPI仕様で様々なモデルを利用できるサービスです。 Cursorの設定項目です。 これを以下の様に謀ればOKです。 OpenAI API Key: <YOUR_OPENROUTER_API_KEY> Override OpenAl Base URL: https://openrouter.ai/api/v1 New Model Name: anthropic/claude-3-opus OpenRouterの方のAPI KeyはSign Up後にメニューのKeyから作成してください。クレジットも購入してください。 他のモデルのモデル名は https://openrouter.ai/docs#models から拾ってください。 設定するとこうなります。API Keyをコピペした後は"→"をクリックしている方がいいかも？ 使えるようにな
当ブログのレスポンシブコーディング施策のまとめです。 メディアクエリよりもコンテナクエリを優先する前回の記事でも触れたようにメディアクエリを一切使わずレスポンシブコーディングしました。 僕がメディアクエリを使用しなかった理由は以下の点が気になっていたからです。 各コンポーネントの状態変化をウィンドウのサイズに依存させるのは都合が悪い。実装者はウィンドウのサイズとにらめっこしながらデザインを調整する必要があり、非常に面倒。ある程度の的確な位置・間隔でブレイクポイントを用意するコーディングは効率的だが、全ての画面サイズで完璧な表示を実現するのが難しい。必ずどこかしらのサイズで見た目を妥協しないといけなくなってくる。ウィンドウのサイズではなく各コンポーネントのサイズを基準にデザイン調整するなら、どのように配置されるかを細かく考える必要がなくなる。代わりに、それぞれのコンポーネントが含まれるコンテ
ゲームボーイとゲームボーイアドバンスのエミュレーター「Pizza Emulators」がGoogle Playから削除される
ゲームボーイやゲームボーイアドバンスといった任天堂ゲーム機のエミュレーターを開発するPizza Emulatorsが、すべてのアプリをGoogle Play上から削除すると発表しました。 Nintendo emulator Pizza Emulators pulls its apps from Google Play store | Eurogamer.net https://www.eurogamer.net/nintendo-emulator-pizza-emulators-pulls-its-apps-from-google-play-store Android向けにゲームボーイとゲームボーイアドバンスのエミュレーターアプリを配布していたPizza Emulatorsが、「アプリ開発よりも家族を優先する」として、アプリの削除を発表しました。 Pizza EmulatorsのDisco
前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」ということでした。 素のReactの挙動を理由に自分が思い描いていたのは「コンポーネントはネスト順に実行される」だったのでこれは衝撃的でフレームワークについて何も知らなかったな、と思わせる内容でした。 ここでは、Reactコンポーネントの実行順序を再確認し、RSC、フレームワークについても確認していきます。 Reactコンポーネントの実行順序 ここでの対象はクライアントコンポーネントです。 このようなネストしたツリーを用意しました。Aと
Next.jsで素朴なフォームをシンプルに作る
素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。 メリット サーバーとの通信が初期遷移時のみに抑えられる ページ遷移が高速 デメリット 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い（アプリケーションの規模が大きくなればなるほど、時間が長くなる） JavaScriptはブラウザで実行されているので、ページ表示までの時間（JavaScriptの実行時間）が使用しているマシンスペックに依存して
はじめに AWSアカウント作成時、デフォルトのVPCが一つ作成されます。 このデフォルトVPCを使用することで、すぐにEC2などのリソースを作成することができるという利点があります。 一方で、デフォルトVPCには自身が把握していないルートテーブルやセキュリティグループが含まれる可能性があります。 そこでリスクヘッジのためにデフォルトVPCの削除を検討される方も多いかと思います。 今回はそんなデフォルトVPCを削除する前に確認しておくことを記載します。 いきなりまとめ リソースが紐づいていなければデフォルトVPCは削除しても大丈夫です。 また、デフォルトVPCが必要になった場合は再度作成することもできます。 削除前の確認 VPCは削除する際に関連するリソースが表示されます。 実際にやってみましょう。 VPCの画面からデフォルトVPCを削除します。 関連するリソースが存在すると怒られました。
こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしていた記述を削除 ・レガシーMPA + Ajaxについて、初回表示に関する言及を削除。SPAで行われる初回表示に関する変化の説明と重複するため ・SPAの初回表示について、FCPが速くなったとポジティブな書き方を、逆にLCPが遅くなったとのネガティブな記述に修正 ・SPA+SSRのページを削除。サーバーサイドフェッチを伴うSSRについてはNext.js側のページで解説 ・サーバーサイドフェッチを伴うSSRについてのネガティブな記述を削除し、SPA的なクライアントサイドフェッチのアーキテクチャとフラットに取り扱う
OCHaCafe Season8 #2の資料です。 https://ochacafe.connpass.com/event/308830/ セッションアーカイブ動画：https://youtu.be/Ywd2J3GZ8wQ
自分も同じ道を辿ってきて今はちょっと考え方が変わっているので自身の整理がてらmeijinさんの記事に乗っからせていただきます🙏 Re: 「A layout is UI that is shared between routes.」って書いているのでめっちゃめちゃ違う用途じゃないか？ export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the use
export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the user is authenticated // But we need to check for it anyway for TypeScript. return redirect('/login'); } else if (error) { return <p>Error: An err
The React ecosystem is a bustling landscape, brimming with frameworks promising to revolutionize web development. Today, we’ll be diving into two popular contenders: Next.js and Remix. Next.js is one of the most popular React frameworks used for server-side rendering. It’s been there for a significant time, and it provides an exceptional developer experience with all the features developers need.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.js の Middleware で Hono を使う
AppRouter Panel Talk
Server Component と Client Component で依存モジュールを切り替える
CSS in React Server Components
Remix vs Next.js - React Japan
App Router移行時に0.01%の確率でCSR遷移が404エラーになる - とろろこんぶろぐ
処理時間が長いAPIをリクエストしたときのローディングUIについて
Next.js Middlewareのテストコードを書く
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
Breaking Down Next.js 14 | FocusReactive
肋骨の影と見分けがつかないような異変がAIによって見つけられた「これがなかったら診断遅れてた」
[Next.js] 開発中のページを開発環境でのみ表示し、本番環境のビルドには含めないようにする
Server Actions時代のformライブラリconform
コスパ良すぎ。デルの7.3万円ノートPC、大学生みんな買うべきじゃない？
Next.jsのlayout.tsxで認証チェックすると情報漏洩するかも
「リモートワークで先輩の仕事ぶりが見えない…」新卒2年目エンジニアの悩み 他人と自分のスキルの差を知るための方法【一問一答】
複数のケーブルをきれいスッキリまとめられる編み込みスリーブ
指針への理解不足がミス招く、待ち受け擁壁の設計で勘違い連発
当ブログのレスポンシブコーディングについて ｜ TAKLOG
React Server Componentの実行順序とフレームワークでの注意点
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
デフォルトVPCは削除しても大丈夫？ | DevelopersIO
フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代
基礎から学ぶNext.js
Re: Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
Next.js vs. Remix - A Developer's Dilemma