Nextjs 加载主页时卡住了

Question

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

\n\n

server/index.js

\n\n

// Use dotenv Config Package\nconst dotenv = require('dotenv');\n// Express Package and Next Package For Run server\nconst express = require('express');\nconst { createProxyMiddleware } = require('http-proxy-middleware');\nconst next = require('next');\nconst nextI18NextMiddleware = require('next-i18next/middleware').default\ndotenv.config();\n\nconst NextI18NextInstance = require('../i18n');\nconst port = parseInt(process.env.PORT, 10) || 3000; // Port Application Run Load From dotenv File\nconst dev = process.env.NODE_ENV !== 'production'; // Application Run Environment Load From dotenv File\nconst app = next({ dev }); // Add Loaded Config to Application\nconst handle = app.getRequestHandler();\n\nconst proxyOptions  = {\n    target: process.env.API_PROXY_URL + ':' + process.env.API_PROXY_PORT,\n    changeOrigin: true,\n    ws: true,\n};\n\nconst devProxy = createProxyMiddleware(proxyOptions);\n\napp.prepare()\n    .then(() => {\n        // Run Express Server\n        const server = express();\n\n        server.use(nextI18NextMiddleware(NextI18NextInstance));\n\n        server.use('/api', devProxy);\n\n\n\n\n        // Handle All Server Requests And Responses\n        server.all('*', (req, res) => {\n            return handle(req, res);\n        });\n\n        // Server Listen Port Config\n        server.listen(port, err => {\n            if (err) throw err;\n            console.log(`> Ready on http://localhost:${port}`);\n        });\n\n    })\n    // Application Catch Error On Run Server\n    .catch(ex => {\n        console.error(ex.stack);\n        process.exit(1);\n    });\n

\n\n

i18n.js

\n\n

// Import Next i18n Package\nconst NextI18Next = require('next-i18next').default;\n\n// Create and Export Default i18n Config Module use in Whole Project\nconst languages = ['fa-IR', 'en-US'];\nconst options = {\n    defaultLanguage: 'fa', // Default Language\n    otherLanguages: ['en'], // Other Languages Can Add In Array\n    // browserLanguageDetection: true, // Detect Language From Browser Meta\n    defaultNS: 'common', // Default File Load in Ns\n    localeExtension: 'json', // Default language Files Extension\n};\n\nconst NextI18NextInstance = new NextI18Next(options);\n\nNextI18NextInstance.i18n.languages = languages;\n\nmodule.exports = NextI18NextInstance;\n

\n\n

pages/index.js

\n\n

import React, { Component } from 'react';\nimport {SiteLayout} from '../components';\nimport { i18n,withTranslation } from '../i18n'\n\nclass MainPage extends Component {\n\n    render() {\n        return (\n            <SiteLayout pageTitle={'\xd8\xb5\xd9\x81\xd8\xad\xd9\x87 \xd8\xa7\xd8\xb5\xd9\x84\xdb\x8c'}>\n                {this.props.t('mainPage')}\n            </SiteLayout>\n        );\n    }\n}\n\nMainPage.getInitialProps = async () => ({\n    namespacesRequired: ['MainPage'],\n});\n\nexport default withTranslation('MainPage')(MainPage);\n

\n\n

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

\n\n

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

\n

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;
    },
};