Next.js 與動態路由重疊 static 路由

Question

我正在使用 Next.JS 應用程序路由系統。

我創建了一個動態路由，其結構類似於pages/[country]/[language]/index.js 。

還有一個結構為pages/cz/cz/index.js的 static 路線。

問題出現然后我在 static 頁面上並嘗試通過Link組件導航以訪問 static 在我的情況下路由內容應該 go 到主頁並重新加載相同的路由內容。

在我的例子中，鏈接只是簡單地導航到兩條路線的主頁<Link to="/"> 。 但問題可能在於如何為預定義和動態路由設置 index.js 文件。

cz/cz/index.js

export { default } from '../../../components/HomePage/';

const { getStaticProps } = createRoute({
  path: '/',
  locale: 'cs',
});

export { getStaticProps };

[國家]/[語言]/index.js

export { default } from '../../../components/HomePage/v2';

const { getStaticPaths, getStaticProps } = createRoute({
  path: '/',
  exclude: ['cs'],
  otherLocales: ['cs'],
});

export { getStaticPaths, getStaticProps };

創建路由

export default function createRoute({
  path,
  otherLocales,
  getPathParams,
  locale,
} = {}) {
  const locales = _.without(include, ...exclude);
  return {
    getStaticPaths: createGetStaticPaths({
      locales,
      getPathParams,
    }),
    getStaticProps: createGetStaticProps({
      path,
      locale,
      locales,
      otherLocales,
    }),
  };
}

頁面結構

那么為什么[country]/[language]/index.js會覆蓋cz/cz/index.js呢？

那么 nextJS 路線中是否有任何東西可以完全匹配 URL ？

或者確保從 static 路由應該 go 到 static 路由？

Answer 1

按照 next.js文檔，預定義路線優先於動態路線，動態路線優先於捕獲所有路線。 請看以下示例：

• pages/post/create.js - 將匹配 /post/create
• pages/post/[pid].js - 將匹配 /post/1、/post/abc 等，但不匹配 /post/create
• pages/post/[...slug].js - 將匹配 /post/1/2、/post/a/b/c 等。但不匹配 /post/create、/post/abc

在您的情況下，您已經定義了預定義的路線cz/cz/index.js並且該路線具有優先權

Answer 2

如果您碰巧使用了重定向，請注意它們會在下一次訪問頁面之前進行處理。

在包含頁面和 /public 文件的文件系統之前檢查重定向。

https://nextjs.org/docs/api-reference/next.config.js/redirects