Произошла ошибка предварительного рендеринга страницы "/ 404" и Ошибка для page / _error: страницы с `getServerSideProps` не могут быть экспортированы - PullRequest
Новая
       5

Произошла ошибка предварительного рендеринга страницы "/ 404" и Ошибка для page / _error: страницы с `getServerSideProps` не могут быть экспортированы

1 голос
/ 27 апреля 2020

Я работаю над проектом, используя TypeScript и Next. js. Веб-сайт очень прост и содержит всего несколько страниц, и я постоянно получаю следующую ошибку при запуске next build в моем проекте: 

Automatically optimizing pages .
Error occurred prerendering page "/404". Read more: https://err.sh/next.js/prerender-error:
Error: Error for page /_error: pages with `getServerSideProps` can not be exported. See more info here: https://err.sh/next.js/gssp-export

У меня нет пользовательской страницы 404, потому что я хочу это должно быть обработано страницей _error.tsx, так как у меня есть перенаправление на стороне сервера для конечных слешей. Это работает при запуске в среде разработки, но умирает, когда я пытаюсь его построить.

Очевидно, _error.tsx имеет getServerSideProps и НЕ должно быть страницей c, поэтому почему он пытается это один? Очевидно, что он не должен быть единым, так как согласно документации Next. js любая страница, которая экспортирует getServerSideProps, не будет. Так почему выдает ошибку?!?!?!

Если это помогает, вот код для моего _error.tsx файла: 

import React, { useEffect } from 'react';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Router from 'next/router';

import { makeStyles, createStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

import useStandardHeaderTags from '../lib/useStandardHeaderTags';
import TitleElement from '../components/TitleElement';

const useStyles = makeStyles(() =>
  createStyles({
    root: {
      textAlign: 'center'
    }
  })
);

interface Props {
  statusCode: number;
}

const Error: React.FC<Props> = ({ statusCode }) => {
  const classes = useStyles();
  const title = statusCode === 404 ? '404' : 'Error';

  return (
    <>
      <Head>
        {useStandardHeaderTags(title)}
      </Head>
      <Container className={classes.root}>
        <TitleElement text={title} />

        {statusCode === 404
          ? 'The page you are looking for could not be found.'
          : 'An error occurred.'}
      </Container>
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ res, req }) => {
  const statusCode = res ? res.statusCode : 404;

  if (statusCode === 404) {
    if (req.url.match(/\/$/)) {
      const withoutTrailingSlash = req.url.substr(0, req.url.length - 1);
      if (res) {
        res.writeHead(303, {
          Location: withoutTrailingSlash
        });
        res.end();
      }
      else {
        Router.push(withoutTrailingSlash);
      }
    }
  }

  return {
    props: {
      statusCode
    }
  };
};

export default Error;

1 Ответ

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

_error.tsx это не обычная страница, а компонент для инициализации страниц с ошибками.

Попробуйте использовать Error.getInitialProps вместо getServerSideProps. 

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

Кроме того, вам следует вернуть объект без вложенности props при использовании Error.getInitialProps.

Настройка страницы ошибок

...