Zeit Now проблема маршрутизации. 404 НЕ НАЙДЕН при перезагрузке страниц, отличных от индексной страницы - PullRequest
Новая
       15

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

0 голосов
/ 31 марта 2020

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

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

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

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

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

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

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

In моя разработка 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"
      }
    }
  ]
}

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

1 Ответ

0 голосов
/ 01 апреля 2020

Оказывается, шаблон из Themeforest использует monorepo со старой конфигурацией, которая больше не совместима с 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;
    }
  }
);
...