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
