generateStaticParams Build Error

.env.local

@@ -0,0 +1,10 @@
+#MONGODB_URI=mongodb://127.0.0.1:27017/kaziblog
+
+MONGODB_URI=mongodb+srv://exzoba:<exzoba>@cluster0.f143vc0.mongodb.net/kaziblog
+
+NEXT_PUBLIC_API_URL=https://zobjs.github.io/nextjs-getStaticParams-lesson
+
+
+# exzoba<<<<<<<<<
+# <exzoba> 2021-09-29 12:00:00
+

.github/workflows/nextjs_page.yml

@@ -0,0 +1,93 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["experiment/ssg_sgr"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -31,7 +31,6 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
 
 # vercel
 .vercel

app/api/blog/[id]/route.js

@@ -0,0 +1,48 @@
+// /app/api/blog/[id]/route.js
+import { NextResponse } from 'next/server';
+import connectDB from '@/app/libs/connectDB';
+import Blog from '@/app/models/blog.schema';
+
+
+// Get a specific blog by ID
+export async function GET(req, { params }) {
+    try {
+      await connectDB();
+      const { id } = params;
+
+      const blog = await Blog.findById(id);
+
+      if (!blog) {
+        return NextResponse.json({ error: 'Blog not found' }, { status: 404 });
+      }
+
+      return NextResponse.json({ blog }, { status: 200 });
+    } catch (error) {
+      return NextResponse.json({ error: 'Failed to fetch blog', details: error.message }, { status: 500 });
+    }
+  }
+
+  // Update a specific blog by ID
+  export async function PUT(req, { params }) {
+    try {
+      await connectDB();
+      const { id } = params;
+      const body = await req.json();
+      const { title, content, author, category, tags, isPublished, featuredImage } = body;
+
+      const updatedBlog = await Blog.findByIdAndUpdate(
+        id,
+        { title, content, author, category, tags, isPublished, featuredImage },
+        { new: true, runValidators: true }
+      );
+
+      if (!updatedBlog) {
+        return NextResponse.json({ error: 'Blog not found' }, { status: 404 });
+      }
+
+      return NextResponse.json({ message: 'Blog updated successfully', blog: updatedBlog }, { status: 200 });
+    } catch (error) {
+      return NextResponse.json({ error: 'Failed to update blog', details: error.message }, { status: 500 });
+    }
+  }
+

app/api/blog/route.js

@@ -0,0 +1,64 @@
+// /app/api/blog/route.js
+
+import { NextResponse } from 'next/server';
+import connectDB from '@/app/libs/connectDB';
+import Blog from '@/app/models/blog.schema';
+
+
+
+
+// Create a new blog
+export async function POST(req) {
+    try {
+      // Connect to database
+      await connectDB();
+      const body = await req.json();
+      const { title, content, author, category, tags, isPublished, featuredImage } = body;
+
+      // Blog validation
+      if (!title || title.length < 5 || title.length > 255) {
+        return NextResponse.json({ error: 'Title must be between 5 and 255 characters' }, { status: 400 });
+      }
+      if (!content || content.length < 5 || content.length > 255) {
+        return NextResponse.json({ error: 'Content must be between 5 and 255 characters' }, { status: 400 });
+      }
+      if (!author) {
+        return NextResponse.json({ error: 'Author is required' }, { status: 400 });
+      }
+      if (!['TECHNOLOGY', 'DESIGN', 'LIFESTYLE', 'BUSINESS'].includes(category)) {
+        return NextResponse.json({ error: 'Invalid category' }, { status: 400 });
+      }
+
+      const blog = new Blog({ title, content, author, category, tags, isPublished, featuredImage });
+      await blog.save();
+      return NextResponse.json({ message: 'Blog created successfully', blog }, { status: 201 });
+    } catch (error) {
+      return NextResponse.json({ error: 'Failed to create blog', details: error.message }, { status: 500 });
+    }
+  }
+
+  // Get all blogs with pagination
+  export async function GET(req) {
+    try {
+      await connectDB();
+      const { searchParams } = new URL(req.url);
+      const page = parseInt(searchParams.get('page')) || 1;
+      const limit = parseInt(searchParams.get('limit')) || 5;
+      const skip = (page - 1) * limit;
+
+      const totalBlogs = await Blog.countDocuments();
+      const blogs = await Blog.find().skip(skip).limit(limit);
+
+      return NextResponse.json({
+        blogs,
+        pagination: {
+          currentPage: page,
+          totalPages: Math.ceil(totalBlogs / limit),
+          totalDocs: totalBlogs,
+        },
+      }, { status: 200 });
+    } catch (error) {
+      return NextResponse.json({ error: 'Failed to fetch blogs', details: error.message }, { status: 500 });
+    }
+  }
+

app/blog/[id]/page.jsx

@@ -0,0 +1,42 @@
+// 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>
+  );
+}

app/blog/page.jsx

@@ -0,0 +1,52 @@
+// 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/libs/connectDB.js

@@ -0,0 +1,14 @@
+import mongoose from 'mongoose';
+
+const MONGODB_URI = process.env.MONGODB_URI;
+
+if (!MONGODB_URI) {
+  throw new Error('Please define the MONGODB_URI environment variable in .env.local');
+}
+
+
+async function connectToDatabase() {
+  mongoose.connect(MONGODB_URI)
+}
+
+export default connectToDatabase;

app/models/blog.schema.js

@@ -0,0 +1,51 @@
+import { Schema, model, models } from 'mongoose';
+
+// Define the Blog schema
+const blogSchema = new Schema({
+    title: {
+        type: String,
+        required: [true, 'Title is required'],
+        trim: true,
+        minlength: [5, 'Title must be at least 5 characters'],
+        maxlength: [255, 'Title must be at most 255 characters'],
+
+    },
+    content: {
+        type: String,
+        required: [true, 'Content is required'],
+        trim: true,
+        minlength: [5, 'Content must be at least 5 characters'],
+        maxlength: [2558098, 'Content must be at most 2558098 characters '],
+
+    },
+    author: {
+        type: String,
+        required: [true, 'Author is required'],
+        trim: true,
+    },
+    category: {
+        type: String,
+        enum: ['TECHNOLOGY', 'DESIGN', 'LIFESTYLE', 'BUSINESS'],
+        required: [true, 'Category is required'],
+        default: 'TECHNOLOGY',
+        trim: true,
+    },
+    tags: {
+        type: [String],
+        default: [],
+    },
+    isPublished: {
+        type: Boolean,
+        default: false,
+    },
+    featuredImage: { // Add a field for a featured image URL
+        type: String,
+        default: 'https://placehold.co/600x400',
+
+      },
+});
+
+// Prevent model overwrite during development
+const Blog = models.Blog || model('Blog', blogSchema);
+
+export default Blog;

env.ex

@@ -0,0 +1,3 @@
+MONGODB_URI=mongodb+srv://exzoba_______________
+
+NEXT_PUBLIC_API_URL=https://zobjs.github.io/nextjs-getStaticParams-lesson