title: Nextjs: The page does not render when the URL is entered directly from the browser, 404 error
body: <p>My problem is as follows.</p>
  <p>I made a project with Next.js. My project works fine on Local, Local Docker, Heroku and Vercel. However, I have a problem when I go to production environment and publish Docker under the domain. When the address is entered from the browser, the page corresponding to the Router gives 404. But when I navigate through the menu, I don't have a problem. In other words, when the URL is entered directly, it does not render. How can i solve this problem. Domain for those who want to review. Original URL: <a href="https://beta.ardictech.com/" rel="nofollow noreferrer">https://beta.ardictech.com/</a> and this is Vercel URL: <a href="https://ardic-web.vercel.app/" rel="nofollow noreferrer">https://ardic-web.vercel.app/</a></p>
  <p>For example, it gives 404 when directly entered with the URL, but when you click on the logo in the upper left and go to the &quot;/&quot; address, the page can be rendered. Or, the pages are rendered while navigating the menu, but if you enter the same address directly or press F5, it does not render.</p>
  <p><strong>next.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    webpackDevMiddleware: (config) =&gt; {
      config.watchOptions = {
        polls: 1000,
        aggregateTimeout: 300,
      };
      return config;
    },
    async headers() {
      return [
        {
          // matching all API routes
          source: &quot;/api/:path*&quot;,
          headers: [
            { key: &quot;Access-Control-Allow-Credentials&quot;, value: &quot;true&quot; },
            { key: &quot;Access-Control-Allow-Origin&quot;, value: &quot;*&quot; },
            {
              key: &quot;Access-Control-Allow-Methods&quot;,
              value: &quot;GET,OPTIONS,PATCH,DELETE,POST,PUT&quot;,
            },
            {
              key: &quot;Access-Control-Allow-Headers&quot;,
              value:
                &quot;X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version&quot;,
            },
          ],
        },
      ];
    },
    trailingSlash: true,
    reactStrictMode: true,
    generateEtags: false,
    i18n: {
      locales: [&quot;en&quot;, &quot;tr&quot;],
      defaultLocale: &quot;en&quot;,
      localeDetection: false,
    },
    env: {
      VERSION: process.env.VERSION,
      MODE: process.env.MODE,
      APP_NAME: process.env.APP_NAME,
      HOST: process.env.HOST,
      BASE_URL: process.env.BASE_URL,
      HOSTNAME: process.env.HOSTNAME,
      PORT: process.env.PORT,
      GA_TRACKING_ID: process.env.GA_TRACKING_ID,
    },
    generateBuildId: async() =&gt; {
      return new Date().toDateString();
    },
    eslint: {
      ignoreDuringBuilds: false,
    },
  };
  </code></pre>
  <p><strong>docker-compose.yml</strong></p>
  <pre class="lang-yaml prettyprint-override"><code>version: &quot;2&quot;
  services:
    ui:
      container_name: beta.ardictech.com
      hostname: beta.ardictech.com
      restart: always
      build:
        context: .
        dockerfile: Dockerfile
      ports:
        - &quot;3000:3000&quot;
      volumes:
        - ./:/app
        - /app/node_modules
        - /app/.next
      env_file:
        - .env
  </code></pre>
  <p><strong>Dockerfile</strong></p>
  <pre><code>FROM node:current-alpine as base
  WORKDIR /app
  COPY package.json ./
  RUN npm install
  COPY . .
  
  FROM base AS build
  ENV NODE_ENV=production
  WORKDIR /build
  COPY --from=base /app ./
  RUN npm run build
  
  FROM node:current-alpine AS production
  ENV NODE_ENV=production
  WORKDIR /app
  COPY --from=build /build/package*.json ./
  COPY --from=build /build/.next ./.next
  COPY --from=build /build/public ./public
  
  RUN npm install
  
  EXPOSE 3000
  CMD npm run start
  </code></pre>