404 page about next-intl

[amannn]

Ok, I see. Is the getServerSideProps function declared for the 404 page then? I'm unsure since you mention that you need the API route during build time, but the presence of that function should cause the page to be run only at runtime (or is there an exception for 404 pages in Next.js to always build statically)? I haven't used Next.js API routes much so far, but I could definitely imagine that they don't mount at build time (like you mention it).

There's quite a bit of guesswork here. Generally this seems to be an issue caused by the usage of Next.js framework features and less by this library. If you can provide a reproduction I might be able to help you, but other than that you could also consider accessing the JSON files via a module import statement – as you've also mentioned.

[amannn]

Hi @andrevenancio and thanks for the report!

The 404 page works the same way as the other pages, I've provided an example in #66. I've also improved the error message a bit when no messages are configured at all – I think that's the issue you were seeing initially.

Do you want to have a look and let me know if this works for you?

[andrevenancio]

Hi @amannn Thanks for your reply. I think this solution does work, but I'll explain how I had implemented it, and hopefully It helps shine a light to:

1. Either a bug
2. Me doing something wrong.

So on my projects I have 2 json (en and de). They live on src/locales/.

But instead of accessing the files directly like you do on your example:

export async function getStaticProps({locale}: GetStaticPropsContext) {
  return {
    props: {
      messages: pick(
        await import(`../../messages/${locale}.json`),
        NotFound.messages
      )
    }
  };
}

I'm doing something different... I'm calling the api which loads the json files for me instead. So my request ends up looking like:

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  return {
    props: {
      messages: await fetch(`${process.env.DOMAIN}/api/language/${locale}`).then((e) => e.json()),
    },
  };
};

And just for reference my api call is just a simple

import { NextApiRequest, NextApiResponse } from 'next';
import messages from '@locales/en.json';

export default async (_req: NextApiRequest, res: NextApiResponse) => {
  res.setHeader('Cache-Control', 's-maxage=300, public');
  res.status(200).json(messages);
};

Now, this works on development and on production except on the 404 page. I can't be sure to why, but it seems like localhost:3000 isn't running on build time for the 404 page hence my initial errors I shared on twitter that seem to come from node-fetch.

Using your solution works fine. I wonder if I should just scrap the API idea and access the json files directly.

[andrevenancio]

I think 404 pages are an exception on nextjs. I'll close this issue. I think you're right this is a nextjs issue not a next-intl issue.
Thank you!

[amannn]

I think 404 pages are an exception

I think so too, yes, based on your pasted build output:

├ ○ /404                                   429 B           675 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)