NextJS 错误页面自定义 CSS 不工作

Question

I generate 500 page in _error.js, when get errorCode ise 500 I want return special 500 page import.

There is no problem for my code, when user get 500 is saw my special 500 page, but css not working?

CSS is come in tag but not working

Here is my _error.js code:

import React from 'react'
import Error from 'next/error'
import PageInternal from './500'

const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {

  return <Error statusCode={statusCode} />

  function Error({ statusCode }) {
    if (statusCode === 500) return <PageInternal />
  }
}

MyError.getInitialProps = async ({ res, err, asPath }) => {
  const errorInitialProps = await Error.getInitialProps({ res, err })
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
.... bla
}

CSS is not working, also JSX not working. I don't understand

My custom 500 Component Pic

CSS not loading? Pic

My 500 component:

import React from 'react'
import DefaultLayout from 'components/layouts/default'
import './style.scss'

const PageInternal = (props) => {

  return (
    <DefaultLayout
      title="Problem"
      {...props}
    >
      <div className="page-internal">
        <div className="internal-image">500</div>
        <p>
          Technical Problems
        </p>
        <a className="btn btn-default btn-lg">Refresh Page</a>
      </div>
    </DefaultLayout>
  )
}
export default PageInternal

Answer 1

if you use styles.component, you need update Next.js to 10+ version. More details here https://github.com/vercel/next.js/issues/16931