Next.js Discord

Discord Forum

Random 404s on navigation

Unanswered
Berger Picard posted this in #help-forum
Open in Discord
Avatar
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

Avatar
those errors are in the network tab right?
try clearinb browser cache
it's probably that
Avatar
Berger PicardOP
I’ve tried that and it works but also happens from random navigation for first time visitors
Avatar
Even I see this error when I run lighthouse tests. Its prob an issue on client side
Avatar
Berger PicardOP
Is there a good solve? It seems like a pretty big deal breaker to have half your pages randomly 404ing on prod
Avatar
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?
Avatar
@Berger Picard
Avatar
Berger PicardOP
I’m on next 15.0.1
Avatar
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>
...
Avatar
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
Avatar
Berger PicardOP
Thanks. Will do.