Next.js Discord

Discord Forum

Random 404s on navigation

Unanswered
Berger Picard posted this in #help-forum
Open in Discord
Berger PicardOP
In production, I'm seeing random 404s

https://my_website_address/_next/static/chunks/app/contact-us/page-92576ca832a5f2d2.js  net:: err aborted 404


These are pretty random errors but usually happen on navigation. Refreshing fixes the page but it's an overall bad experience. My links are setup like:

<Link href="/" className="text-xl pl-[1px]">Home</Link>
<Link
  aria-label="Write me an email"
  className="group flex items-center gap-2 text-primary py-2 px-4 rounded-full"
  href="/contact-us"
>
...
</Link>


next 15.0 deployed on fly.io

13 Replies

try clearinb browser cache
it's probably that
Berger PicardOP
I’ve tried that and it works but also happens from random navigation for first time visitors
Berger PicardOP
Is there a good solve? It seems like a pretty big deal breaker to have half your pages randomly 404ing on prod
"use php"
I'll see.

I got the same issue before when running lighthouse checks, but not now
I'm really not sure about this now. Whats your nextjs version?
"use php"
@Berger Picard
Berger PicardOP
I’m on next 15.0.1
Berger PicardOP
So i'm still having this issue. It looks like a bunch of people were having the same [issue](https://answers.netlify.com/t/javascript-bundle-issues-netlify-build-breaking-several-hours-after-deployment-completes/122901/51) on Netlify (i'm running on fly.io) and it required an undisclosed Netlify fix, and for them to run a cache purge.

I'm wondering if that's what's causing my issues. Most of my pages are loading data from directus cms and I have cache turned off there

/src/lib/directus.js
import { createDirectus, authentication, login, clearCache} from '@directus/sdk';
import { rest } from '@directus/sdk';

const DIRECTUS_URL = process.env.DIRECTUS_URL || 'http://localhost:8055';

const directus = createDirectus(DIRECTUS_URL)
  .with(
    rest({
      onRequest: (options) => ({
        ...options,
        next: {
          tags: ['directus'],
        },
        cache: 'no-store'
      }),
    })
  );

export default directus;


/src/app/about-us/page.js
const getContent = async () => {
  const {
    header_content,
    ...aboutUs
  } = await directus.request(readItems('about_us', {
    fields: ['*']
  }));

  const headerContent = DOMPurify.sanitize(header_content);

  return {
    ...aboutUs,
    headerContent
  };
};

const AboutUs = async () => {
  const {
    header_title,
    headerContent,
  } = await getContent();

  const imageBaseUrl = directus.url + 'assets/';

  return (
    <div>
      <section>
        <h1>{header_title}</h1>
        <div>
          {parse(headerContent)}
        </div>
      </section>
...
"use php"
yup, you might need to also open a issue on nextjs.

There is no way to verify whether the issue is with next start command, or fly.io, So I'm not 100% sure
Berger PicardOP
Thanks. Will do.