Next.js 14 モーダルとルーティング

AppRouterの場合、<Link>をクリックしたときに、href-asの挙動がPageRouterの時と異なる。

そのため、asを使用する理由がないので、見た目だけのURLの書き換えを行う場合は、以下のようにnext.config.mjsファイルのrewrite関数を定義することで解決する。
この場合、ブラウザに表示されるURLは/test02/1のようになるが、内部では/?id=1になるため、ルートのページが処理することになる。

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/test02/:id',
        destination: '/?id=:id',
      },
    ]
  },
}

export default nextConfig

また、現在(v14.2.8)のAppRouterにはshallowオプションはないので、Linkにshallowをつけても意味がない。

export interface AppRouterInstance {
    /**
     * Navigate to the previous history entry.
     */
    back(): void;
    /**
     * Navigate to the next history entry.
     */
    forward(): void;
    /**
     * Refresh the current page.
     */
    refresh(): void;
    /**
     * Navigate to the provided href.
     * Pushes a new history entry.
     */
    push(href: string, options?: NavigateOptions): void;
    /**
     * Navigate to the provided href.
     * Replaces the current history entry.
     */
    replace(href: string, options?: NavigateOptions): void;
    /**
     * Prefetch the provided href.
     */
    prefetch(href: string, options?: PrefetchOptions): void;
}

export interface NavigateOptions {
    scroll?: boolean;
}

koduka

Next.jsでは、rootIDを設定しないので、ページの内容を<main id='main'>'で囲うことで、モーダルで隠れている部分にaria-hidden`を適用することができる。

ReactModal.setAppElement('#main')

主にスクリーンリーダーのユーザー向けの機能で、 aria-hidden 属性によって、モーダルが開いているときにページコンテンツを非表示と同じような状態にする機能です。視覚的にモーダルウインドウがページコンテンツの上に被さるように表示されている＝ページコンテンツが隠されているのを、スクリーンリーダー向けにはモーダル以外の部分に aria-hidden 属性をつけることで実現しているようです。