generateStaticParams Build Error

[zobjs]

Fetching data in generateStaticParams for dynamic routes:

// app/blog/page.js
"use client"
import React, { useEffect, useState } from 'react';
import Link from 'next/link';

const BlogList = () => {
  const [blogs, setBlogs] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const response = await fetch('/api/blog');
        const data = await response.json();
        setBlogs(data.blogs);
      } catch (error) {
        console.error('Error loading blogs:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchBlogs();
  }, []);

  if (loading) {
    return <p className="text-center mt-10 text-gray-500">Loading...</p>;
  }

  return (
    <div className="bg-gray-100 min-h-screen py-10 px-4">
      <h1 className="text-3xl font-bold text-center mb-10">Blogs</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {blogs.map((blog) => (
          <Link href={`/blog/${blog._id}`} key={blog._id}>
            <div className="p-4 bg-white shadow-lg rounded-lg hover:shadow-xl transition">
              <img
                src={blog.featuredImage}
                alt={blog.title}
                className="w-full h-40 object-cover rounded-t-lg"
              />
              <h2 className="text-lg font-bold mt-4">{blog.title}</h2>
              <p className="text-sm text-gray-500 mt-2">{blog.author}</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default BlogList;

// app/blog/[id]/page.js

import React from 'react';

const fetchBlogById = async (id) => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/blog/${id}`);
  if (!response.ok) throw new Error('Failed to fetch blog');
  return response.json();
};

export default async function BlogDetail({ params }) {
  const { id } = params;
  const { blog } = await fetchBlogById(id);

  return (
    <div className="bg-gray-100 min-h-screen py-10 px-4">
      <div className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-6">
        <img
          src={blog.featuredImage}
          alt={blog.title}
          className="w-full h-64 object-cover rounded-t-lg"
        />
        <h1 className="text-3xl font-bold mt-6">{blog.title}</h1>
        <p className="text-sm text-gray-500 mt-2">By {blog.author}</p>
        <span className="inline-block mt-4 px-3 py-1 text-sm font-medium text-white bg-blue-500 rounded-full">
          {blog.category}
        </span>
        <p className="mt-4 text-gray-700">{blog.content}</p>
        <div className="mt-4">
          {blog.tags.map((tag, index) => (
            <span
              key={index}
              className="inline-block px-3 py-1 text-sm text-gray-600 bg-gray-200 rounded-full mr-2"
            >
              #{tag}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

Github Action build error

localhost build successfully

[atapas]

@zobjs Can you please create an issue first explaining what improvements you are trying to propose? I will look into this PR accordingly. Thanks!