#next build and start make 404 page

1 messages · Page 1 of 1 (latest)

muted geyser
#

Hello I'm encountering an issue

When I deploy via (npm run build && npm run start) so next build and next start it displays a nextjs 404 page.

I'm using src directory and app-router.

Any clues please ?

marble heartBOT
#

Hi @muted geyser. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, there could be several reasons why you're encountering a 404 page when deploying your Next.js application with npm run build and npm run start.

  1. Missing default.js in app\ directory: According to a Github issue (https://github.com/vercel/next.js/issues/63830), if you're using the app\ directory structure, you need to have a default.js file in the app\ directory. Without this file, the default 404 page might be displayed after running npm run build and npm run start.

  2. Issues with dynamic routes: Another Github issue (https://github.com/vercel/next.js/issues/67771) suggests that there might be issues with dynamic routes and custom cache handlers. If you're using dynamic routes in your application, this could potentially lead to a 404 page being displayed.

  3. Issues with NODE_ENV=test: A Github issue (https://github.com/vercel/next.js/issues/58935) mentions that setting NODE_ENV=test when building the app can cause the app to return a 404 for dynamic routes that have 'force-static'.

  4. Custom 404 Page: Next.js allows you to create a custom 404 page by creating a pages/404.js file. If you have this file in your project, it might be overriding the default behavior. You can check the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/routing/custom-error) for more details.

  5. Server Errors: If there are server-side errors in your application, Next.js will display a static 500 page by default. However, you can also use a 404 page to handle specific runtime errors like file not found. More details can be found in the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/configuring/error-handling).

#

Without more specific details about your application and its configuration, it's hard to pinpoint the exact cause of the issue. I would recommend checking the points mentioned above and see if any of them apply to your situation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

muted geyser
#

That's not the case @marble heart, here are my docker stuffs :

services:
core:
restart: unless-stopped
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- ./app:/app
environment:
- NODE_ENV=production
networks:
- app-network

caddy:
image: caddy:latest
restart: unless-stopped
ports:
- "80:80"
- "443:443"
volumes:
- ./Caddyfile:/etc/caddy/Caddyfile
- ./app:/app
environment:
- CADDY_FILE=/etc/caddy/Caddyfile
networks:
- app-network

networks:
app-network:
driver: bridge

FROM oven/bun:latest

COPY . .

RUN bun install --frozen-lockfile
RUN bun run build

CMD ["bun", "run", "start"]

marble heartBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the Docker configuration you've provided, it seems like you're using a Docker multi-service setup with a core service for your Next.js application and a caddy service for your web server. Here are a few things you might want to check:

  1. Docker Volumes: You're using Docker volumes to map your local ./app directory to the /app directory inside your Docker containers. Make sure that your local ./app directory contains all the necessary files for your Next.js application.

  2. Environment Variables: You're setting the NODE_ENV environment variable to production in your core service. This is the correct setting for running a Next.js application in production mode. However, make sure that your application doesn't require any other environment variables that are not set in your Docker configuration.

  3. Build Command: In your Dockerfile, you're using bun run build to build your Next.js application. Make sure that your package.json file contains a build script that runs next build.

  4. Start Command: In your Dockerfile, you're using bun run start to start your Next.js application. Make sure that your package.json file contains a start script that runs next start.

  5. Network Configuration: You're using a custom Docker network named app-network for your services. Make sure that this network is correctly set up and that both your core and caddy services are able to communicate with each other over this network.

If none of the above points help resolve your issue, it might be helpful to check the logs of your Docker containers for any error messages. You can do this by running docker logs <container_id> for each of your containers.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@muted geyser Kapa.ai is still learning and improving, please let me know how I did by reacting below.

muted geyser
#

@marble heart Here are the docker logs of core container :
docker compose logs core
core-1 | $ next start
core-1 | ▲ Next.js 14.2.13
core-1 | - Local: http://localhost:3000
core-1 |
core-1 | ✓ Starting...
core-1 | ✓ Ready in 676ms
core-1 | $ next start
core-1 | ▲ Next.js 14.2.13
core-1 | - Local: http://localhost:3000
core-1 |
core-1 | ✓ Starting...
core-1 | ✓ Ready in 343ms

marble heartBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Based on the logs you've provided, it seems like your Next.js application is starting up correctly inside the Docker container. The next start command is running and the application is ready in a few hundred milliseconds.

However, the logs don't provide any information about what happens when a request is made to the application. If you're seeing a 404 page, it could be due to a route that doesn't exist in your Next.js application.

Here are a few things you could check:

  1. Routing: Make sure that the route you're trying to access exists in your Next.js application. For example, if you're trying to access <http://localhost:3000/page,> make sure that there's a corresponding page.js (or page.tsx if you're using TypeScript) file in your pages directory.

  2. Dynamic Routes: If you're using dynamic routes (https://nextjs.org/docs/routing/dynamic-routes), make sure that the dynamic segments of the URL match the file and directory names in your pages directory.

  3. Custom Server: If you're using a custom server (https://nextjs.org/docs/advanced-features/custom-server) with Next.js, make sure that all the server routes are correctly configured and that they're correctly handling requests for your Next.js pages.

  4. Docker Networking: Make sure that your Docker container is correctly configured to accept incoming connections. By default, the next start command will start the server on localhost, which might not be accessible from outside the Docker container. You might need to start the server on 0.0.0.0 to accept connections from any IP address. You can do this by modifying your start script in package.json to next start -H 0.0.0.0.

#

If none of these suggestions help, you might need to provide more information about your application and its configuration. Specifically, information about your pages directory and any custom server or routing configuration would be helpful.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@muted geyser Kapa.ai is still learning and improving, please let me know how I did by reacting below.

muted geyser
#

Looks like @marble heart that the next build, build the project for pages directory and not app directory

marble heartBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

By default, Next.js will run ESLint for all files in the pages/, app/, components/, lib/, and src/ directories. However, you can specify which directories using the dirs option in the eslint config in next.config.js for production builds. Here is an example:

module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
  },
}

Similarly, the --dir and --file flags can be used for next lint to lint specific directories and files. Here is an example:

next lint --dir pages --dir utils --file bar.js

This information is from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/configuring/eslint#linting-custom-directories-and-files).

However, if you're using the app/ directory structure (which is an experimental feature in Next.js), you might encounter issues with the next build command. There is a Github issue (https://github.com/vercel/next.js/issues/50478) that discusses a similar problem. The issue suggests that the --no-app option is not being respected, which might cause next build to incorrectly build the project for the pages/ directory instead of the app/ directory.

Unfortunately, without more specific details about your application and its configuration, it's hard to provide a more precise answer. I would recommend checking your next.config.js file and your package.json scripts to make sure they're correctly configured for the app/ directory structure.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: