Nextjs stuck loading the home page

user_11760643 0
Viewed 6896

I'm working on a website created with Nextjs. But when I run it on my local it doesn't load anything on the console just show [ event ] build page: /_error. I tried to log the _error.js but nothing had been shown. The following are my configuration:

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);

after the server is up and show > Ready on http://localhost:3000 I got the following output in terminal and browser stuck loading the page. if you need more info ask. is there any idea how to debug this or fix it? thanks in advance.

[HPM] Proxy created: /  -> https://myapi**.com:
> Ready on http://localhost:3000
[ event ] build page: /_error
i18next next.js reactjs
3 Answers

Solved.How?Firstly i tried to remove node_modules and reinstall them,no luck.After that I upgraded next.js version 11 with version 12 and compiling works well.You can look here in the docs upgrading process upgrade process

user_106915870
user_146935820

Today I also face this problem and it takes me hours to figure it out, my false is in the next.config.js file. Please check if it can help you.

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