next.jsに関するmfcatsのブックマーク (3)

  • Next.js の App Router で 親layout を継承しない方法

    Leaner Technologies の @corocn です。 最近は Next.js with App Router に入門しており、layout に関する学びを共有します。 記事は Next.js v13.4.4 で検証しました。 子のpageで親のlayoutを継承したくない場合にどうするか? まず App Router には Nested Layouts という機能があり、上層レイアウトの children で定義した部分に下層のレイアウトまたはページが描画され、入れ子のように描画されます。 下層のレイアウト定義がシンプルになる一方、上層のレイアウトを無理やり修正することはできませんが、無視したいケースも一定存在します。そこで利用するのが Route Groups です。 Route Groups を利用する方法 Route Groups は "(auth)" のような括弧付

    Next.js の App Router で 親layout を継承しない方法
  • https://github.com/orgs/vercel-labs/repositories

  • Next.js の Interception Routes について

    Next.js の Interception Routes について 2023.04.09 Intercepting routes は Next.js 13.3 から追加された機能で、App Router(app ディレクトリ)において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。 Intercepting routes は Next.js 13.3 から追加された機能で、App Router(app ディレクトリ)において使用できます。 Intercepting routes ではブラ

    Next.js の Interception Routes について
  • 1