Nextjs暂停加载主页

Question

我正在使用Nextjs创建的网站上。但是，当我在本地运行它时，它不会在控制台上加载任何内容，只是显示[ event ] build page: /_error。我试图登录_error.js，但未显示任何内容。以下是我的配置：

server/index.js

// Use dotenv Config Package
const dotenv = require('dotenv');
// Express Package and Next Package For Run server
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const next = require('next');
const nextI18NextMiddleware = require('next-i18next/middleware').default
dotenv.config();

const NextI18NextInstance = require('../i18n');
const port = parseInt(process.env.PORT, 10) || 3000; // Port Application Run Load From dotenv File
const dev = process.env.NODE_ENV !== 'production'; // Application Run Environment Load From dotenv File
const app = next({ dev }); // Add Loaded Config to Application
const handle = app.getRequestHandler();

const proxyOptions  = {
    target: process.env.API_PROXY_URL + ':' + process.env.API_PROXY_PORT,
    changeOrigin: true,
    ws: true,
};

const devProxy = createProxyMiddleware(proxyOptions);

app.prepare()
    .then(() => {
        // Run Express Server
        const server = express();

        server.use(nextI18NextMiddleware(NextI18NextInstance));

        server.use('/api', devProxy);




        // Handle All Server Requests And Responses
        server.all('*', (req, res) => {
            return handle(req, res);
        });

        // Server Listen Port Config
        server.listen(port, err => {
            if (err) throw err;
            console.log(`> Ready on http://localhost:${port}`);
        });

    })
    // Application Catch Error On Run Server
    .catch(ex => {
        console.error(ex.stack);
        process.exit(1);
    });

i18n.js

// Import Next i18n Package
const NextI18Next = require('next-i18next').default;

// Create and Export Default i18n Config Module use in Whole Project
const languages = ['fa-IR', 'en-US'];
const options = {
    defaultLanguage: 'fa', // Default Language
    otherLanguages: ['en'], // Other Languages Can Add In Array
    // browserLanguageDetection: true, // Detect Language From Browser Meta
    defaultNS: 'common', // Default File Load in Ns
    localeExtension: 'json', // Default language Files Extension
};

const NextI18NextInstance = new NextI18Next(options);

NextI18NextInstance.i18n.languages = languages;

module.exports = NextI18NextInstance;

pages/index.js

import React, { Component } from 'react';
import {SiteLayout} from '../components';
import { i18n,withTranslation } from '../i18n'

class MainPage extends Component {

    render() {
        return (
            <SiteLayout pageTitle={'صفحه اصلی'}>
                {this.props.t('mainPage')}
            </SiteLayout>
        );
    }
}

MainPage.getInitialProps = async () => ({
    namespacesRequired: ['MainPage'],
});

export default withTranslation('MainPage')(MainPage);

服务器启动并显示> Ready on http://localhost:3000之后，我在终端中得到以下输出，浏览器无法加载页面。如果您需要更多信息，请询问。有什么想法如何调试或修复它？预先感谢。

[HPM] Proxy created: /  -> https://myapi**.com:
> Ready on http://localhost:3000
[ event ] build page: /_error

Answer 1

今天我也面临这个问题，我花了几个小时才弄清楚，我的错误出现在next.config.js文件中。请检查是否可以帮助您。

const path = require("path");
const subFolder = 'src';
module.exports = {
    webpack: config => {
        config.node = {
            fs: "empty"
        };

        // You can see MANY IMPLEMENTED ALIASES when printing this:
        console.log(config.resolve.alias);

        // So if you want to add your own aliases, don't replace the old one:
        // PLEASE DON'T DO THIS >>>
        // config.resolve.alias = {
        //     "@components": path.join(__dirname, "components"),
        //     "@pages": path.join(__dirname, "pages"),
        //     "@redux": path.join(__dirname, "redux"),
        //     "@api": path.join(__dirname, "api")
        // };
        // <<< PLEASE DON'T DO THIS


        // DO THIS INSTEAD >>>
        config.resolve.alias = {
            ...config.resolve.alias // <<< ADD THIS LINE to extend the old one
            "@components": path.join(__dirname, "components"),
            "@pages": path.join(__dirname, "pages"),
            "@redux": path.join(__dirname, "redux"),
            "@api": path.join(__dirname, "api")
        };
        // <<< DO THIS INSTEAD
      return config;
    },
};