React/Next.js实现100张图片对应独立URL页面的方案咨询

针对你的需求，推荐使用Next.js的动态路由+静态生成方案，替代直接操作window.location的临时实现，解决SSR兼容性、SEO优化和可维护性问题。以下是具体实现步骤：

1. 整理图片数据 #

创建一个数据文件统一管理所有图片信息，比如data/images.js：

export const images = [
  {
    "image_location": "fans/mdf-1.png",
    "image_id": "mdf-1",
    "image_name": "Product 1"
  },
  {
    "image_location": "fans/mdf-2.png",
    "image_id": "mdf-2",
    "image_name": "Product 2"
  },
  // 补充剩余98条图片数据
];

2. 实现动态路由页面 #

根据你使用的Next.js版本选择对应实现：

方案一：Pages Router（Next.js 12及以下） #

在pages目录下创建[imageId].js文件：

import { images } from '../data/images';
import Image from 'next/image';

// 预生成所有图片页面的静态路径
export async function getStaticPaths() {
  const paths = images.map(image => ({
    params: { imageId: image.image_id }
  }));

  return {
    paths,
    fallback: false // 非预定义路径直接返回404
  };
}

// 获取当前页面的图片数据
export async function getStaticProps({ params }) {
  const image = images.find(img => img.image_id === params.imageId);

  if (!image) {
    return { notFound: true };
  }

  return {
    props: { image },
    revalidate: 86400 // 可选：每天重新生成页面，适配数据更新
  };
}

export default function ImageDetailPage({ image }) {
  const fullImageUrl = `https://www.example.com/demo/${image.image_location}`;

  return (
    <div className="image-page">
      <h1>{image.image_name}</h1>
      <Image
        src={fullImageUrl}
        alt={image.image_name}
        width={800}
        height={600}
        className="product-image"
      />
    </div>
  );
}

方案二：App Router（Next.js 13+） #

在app目录下创建[imageId]/page.js文件：

import { images } from '@/data/images';
import Image from 'next/image';

// 生成所有静态页面路径
export async function generateStaticParams() {
  return images.map(image => ({
    imageId: image.image_id
  }));
}

export default function ImageDetailPage({ params }) {
  const image = images.find(img => img.image_id === params.imageId);

  if (!image) {
    return <div className="not-found">404 - 图片不存在</div>;
  }

  const fullImageUrl = `https://www.example.com/demo/${image.image_location}`;

  return (
    <div className="image-page">
      <h1>{image.image_name}</h1>
      <Image
        src={fullImageUrl}
        alt={image.image_name}
        width={800}
        height={600}
        className="product-image"
      />
    </div>
  );
}

3. 方案优势 #

• 兼容SSR/SSG：避免直接操作window对象导致的服务端渲染报错
• 性能优化：预生成所有静态页面，访问速度快且SEO友好
• 可维护性：图片数据集中管理，新增/修改图片只需更新数据文件
• 错误处理：自动处理无效路径，返回404页面而非损坏的图片

可选优化 #

• 如果图片数据来自外部API，可在getStaticProps（Pages Router）或组件内部（App Router）调用API获取数据
• 使用fallback: 'blocking'（Pages Router）或增量静态生成，适配图片数量动态变化的场景
• 自定义404.js页面提升用户体验

内容的提问来源于stack exchange，提问作者Adarsha Hegade