title: Nextjs stuck loading the home page
body: <p>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 <code>[ event ] build page: /_error</code>. I tried to log the <code>_error.js</code> but nothing had been shown. The following are my configuration:</p>
  
  <p><code>server/index.js</code> </p>
  
  <pre><code>// 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(() =&gt; {
          // Run Express Server
          const server = express();
  
          server.use(nextI18NextMiddleware(NextI18NextInstance));
  
          server.use('/api', devProxy);
  
  
  
  
          // Handle All Server Requests And Responses
          server.all('*', (req, res) =&gt; {
              return handle(req, res);
          });
  
          // Server Listen Port Config
          server.listen(port, err =&gt; {
              if (err) throw err;
              console.log(`&gt; Ready on http://localhost:${port}`);
          });
  
      })
      // Application Catch Error On Run Server
      .catch(ex =&gt; {
          console.error(ex.stack);
          process.exit(1);
      });
  </code></pre>
  
  <p><code>i18n.js</code></p>
  
  <pre><code>// 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;
  </code></pre>
  
  <p><code>pages/index.js</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import {SiteLayout} from '../components';
  import { i18n,withTranslation } from '../i18n'
  
  class MainPage extends Component {
  
      render() {
          return (
              &lt;SiteLayout pageTitle={'صفحه اصلی'}&gt;
                  {this.props.t('mainPage')}
              &lt;/SiteLayout&gt;
          );
      }
  }
  
  MainPage.getInitialProps = async () =&gt; ({
      namespacesRequired: ['MainPage'],
  });
  
  export default withTranslation('MainPage')(MainPage);
  </code></pre>
  
  <p>after the server is up and show <code>&gt; Ready on http://localhost:3000</code> 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.</p>
  
  <pre><code>[HPM] Proxy created: /  -&gt; https://myapi**.com:
  &gt; Ready on http://localhost:3000
  [ event ] build page: /_error
  </code></pre>