Nextjs: The page does not render when the URL is entered directly from the browser, 404 error

  docker, http-status-code-404, next.js

My problem is as follows.

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: https://beta.ardictech.com/ and this is Vercel URL: https://ardic-web.vercel.app/

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 "/" 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.

next.config.js

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      polls: 1000,
      aggregateTimeout: 300,
    };
    return config;
  },
  async headers() {
    return [
      {
        // matching all API routes
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
          },
          {
            key: "Access-Control-Allow-Headers",
            value:
              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
          },
        ],
      },
    ];
  },
  trailingSlash: true,
  reactStrictMode: true,
  generateEtags: false,
  i18n: {
    locales: ["en", "tr"],
    defaultLocale: "en",
    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() => {
    return new Date().toDateString();
  },
  eslint: {
    ignoreDuringBuilds: false,
  },
};

docker-compose.yml

version: "2"
services:
  ui:
    container_name: beta.ardictech.com
    hostname: beta.ardictech.com
    restart: always
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./:/app
      - /app/node_modules
      - /app/.next
    env_file:
      - .env

Dockerfile

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

Source: Docker Questions

LEAVE A COMMENT