在Next.js项目中排除特定文件夹以优化构建大小并实现运行时访问

{
  "compilerOptions": {
    // ... 其他 TypeScript 编译选项
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "MY_FOLDER"] // 添加您的文件夹路径
}

// pages/data-page.tsx
import { GetServerSideProps } from 'next';
import path from 'path';
import fs from 'fs/promises'; // 使用 fs.promises 进行异步操作

interface DataProps {
  data: any;
}

export const getServerSideProps: GetServerSideProps<DataProps> = async () => {
  try {
    // 构建到 MY_FOLDER/data.json 的绝对路径
    // 注意：在部署环境中，MY_FOLDER 必须与您的构建产物一同部署
    const dataDirectory = path.join(process.cwd(), 'MY_FOLDER');
    const filePath = path.join(dataDirectory, 'data.json');

    const fileContents = await fs.readFile(filePath, 'utf8');
    const data = JSON.parse(fileContents);

    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error('Failed to read data.json:', error);
    return {
      notFound: true, // 或者返回一个错误页面
    };
  }
};

const DataPage: React.FC<DataProps> = ({ data }) => {
  return (
    <div>
      <h1>Data from JSON</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataPage;

// components/ClientDataFetcher.tsx
import React, { useEffect, useState } from 'react';

const ClientDataFetcher: React.FC = () => {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        // 通过相对于 public 目录的路径访问
        const response = await fetch('/MY_FOLDER/data.json');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e: any) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) return <p>Loading data...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Client-side Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default ClientDataFetcher;