Как правильно использовать файлы JSON, хранящиеся на стороне сервера в Next.js?

Вам следует добавить этот параметр компилятора в tsconfig.json вашего проекта.

    "compilerOptions: {
       "resolveJsonModule": true,
    }

Затем вы можете получить строго типизированную структуру данных из файлов, которые хранятся на вашем сервере в частном порядке, но становятся частью пакета javascript...

    import stuff from "./stuff.json";

в основном, что касается разницы между использованием fs и import/require, я думаю, если вы не хотите перестраивать каждый раз при изменении файла, вам следует использовать fs.

Что касается абстрагирования поведения, я думаю, вы могли бы создать функцию так, как вам нужно, начиная с примера на https://vercel.com/guides/loading-static-file-nextjs-api-route.

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>
  );
}

В любом месте вы можете определить

const myReadFile = async (path: string) => {
  const file = await fs.readFile(process.cwd() + path, "utf8");
  const data = JSON.parse(file);
  return data;
};

И может вызвать его в любом компоненте

export default async function Page() {
  const data = myReadFile("/app/data.json");

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

От символа к символу вы, возможно, не сильно сэкономите, но все равно полезно избегать переписывания одного и того же, и в этом случае, вероятно, нет недостатков.

И вы можете расширить функцию тем, что хотите. Если вы хотите добавить типы для того, что должно быть проанализировано, вы можете добавить общий тип, который вы укажете вручную.

const myReadFileTyped = async <T,>(path: string): Promise<T> => {
  const file = await fs.readFile(process.cwd() + path, "utf8");
  const data: T = JSON.parse(file);
  return data;
};

затем

type Data = {title:string, content:string};
const data = await myReadFileTyped<Data>("/app/data.json")

и используйте данные в своем компоненте.

Если вы хотите перехватывать ошибки и возвращать null или что-то еще в исключениях, вы можете сделать

const myReadFileSafe = async <T,>(path: string): Promise<T | null> => {
  try {
    const file = await fs.readFile(process.cwd() + path, "utf8");
    const data: T = JSON.parse(file);
    return data;
  } catch (e) {
    console.info(e);
    return null;
  }
};

а потом

export default async function Page() {
  const data = await myReadFileSafe("/app/data.json");

  if (data === null) {
    return null;
  }

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

Затем, в конечном итоге, вы можете добавить любую логику, какую захотите, если вы хотите проверить проанализированные входные данные с помощью библиотек, вы можете это сделать.