Zeit Теперь проблема маршрутизации. 404 НЕ НАЙДЕН при перезагрузке страниц, отличных от страницы индекса

Недавно я купил шаблон Next.js на Themeforest и попытался развернуть его в Zeit Now.

Это монорепозиторий, использующий рабочее пространство Lerna and Yarn. Код приложения Next.js находится в папке packages/landing

С индексной страницей все в порядке (страница с маршрутом /), я могу без проблем перезагрузить ее.

Проблема возникает, когда я пытался добавить новую страницу в папку pages. Например /privacy-policy или /terms-of-service, ...

Если я просматриваю эти страницы через <Link /> со страницы индекса, все работает нормально. Но если я попытаюсь перезагрузить эти страницы или отправить своим пользователям прямую ссылку на них, они не смогут получить доступ к этим страницам. Вместо этого мои пользователи увидят 404 NOT FOUND.

Вы можете понять, что я имею в виду, перейдя на эту страницу https://superprops-2-r09pdhfab.now.sh/. При перезарядке работает нормально.

Но если вы откроете эту страницу https://superprops-2-r09pdhfab.now.sh/saas, вы увидите 404 (также развернут код для /saas)

В моей разработке localhost он отлично работает для всех страниц при перезагрузке. Так что я думаю, что проблема в конфигурации Zeit Now.

Это код внутри now.json:

{
  "version": 2,
  "builds": [
    { "src": "packages/landing/package.json", "use": "@now/static-build" }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/packages/landing/$1",
      "headers": {
        "x-request-path": "$1"
      }
    }
  ]
}

Как это исправить? Спасибо.


reactjs javascript next.js vercel
person Hoang Trinh    schedule 31.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оказывается, шаблон от Themeforest использует монорепозицию со старой конфигурацией, которая больше не совместима с Now zero-config.

Итак, мое решение - создать новый проект Next.js, скопировать весь код и обновить next.config.js, как показано ниже.

Эта часть config.resolve.modules.push(path.resolve('./')); избавляет меня от изменения любого оператора импорта.

const path = require('path');
const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withFonts = require('next-fonts');
const withCSS = require('@zeit/next-css');
module.exports = withPlugins(
  [
    [
      withOptimizedImages,
      {
        mozjpeg: {
          quality: 90
        },
        webp: {
          preset: 'default',
          quality: 90
        }
      }
    ],
    withFonts,
    withCSS
  ],
  {
    webpack(config) {
      // Here is the magic
      // We push our config into the resolve.modules array
      config.resolve.modules.push(path.resolve('./'));
      return config;
    }
  }
);
person Hoang Trinh    schedule 01.04.2020