Next.js Discord

Discord Forum

How to optimize json imports

Unanswered
American Curl posted this in #help-forum
Open in Discord
American CurlOP
Hi there,

I'm trying to optimize the build output of my next app.
I'm importing some "database" json files dynamically and it seems like each generated page js includes the whole thing. I can also see in the output files that the json is inlined.

You can see the @next/bundle-analyzer output in the screenshot

Is there any way to de-duplicate it so it's not inlined in every page.js?
Maybe it's also time to move to a real database now 😄

Thanks

3 Replies

Plott Hound
how and where are you importing these JSON files?
American CurlOP
inside a server routes component layout/page with a regular dynamic import like
await import("../../src/data/de/donations.json", {
      assert: { type: "json" },
    }).then((module) => module.default)


I guess the issue is that i'm using edge runtime which puts all page handlers into separate files
Plott Hound
yeah, ultimately using a db would be the ideal solution in this scenario. did you try using import { promises as fs } from 'fs'; too?

something like this:
import { promises as fs } from 'fs';

export default async function Page() {
  const file = await fs.readFile(process.cwd() + '/app/data.json', 'utf8');
  const data = JSON.parse(file);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}