Preparing code for static hosting

Author: Programming-Sai

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  compress: true,
+  basePath: "/Blog", // Set this to your repository name
+  assetPrefix: "/Blog/", // Same as basePath, but with a trailing slash
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package-lock.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@tiptap/extension-blockquote": "^2.9.1",

package.json

@@ -1,43 +1,55 @@
-import { notFound } from 'next/navigation';
-import styles from './category.module.css';
-import RecentPosts from '@/components/recentposts/RecentPosts';
-import PopularPosts from '@/components/popularposts/PopularPosts';
-import Pagination from '@/components/pagination/Pagination';
-import Wrapper from '@/components/pagewrapper/Wrapper';
-import Navbar from '@/components/navbar/Navbar';
-import Footer from '@/components/footer/Footer';
+import React from "react"; // Import useEffect for side effects
+import { notFound } from "next/navigation";
+import styles from "./category.module.css";
+import RecentPosts from "@/components/recentposts/RecentPosts";
+import PopularPosts from "@/components/popularposts/PopularPosts";
+import Pagination from "@/components/pagination/Pagination";
+import Wrapper from "@/components/pagewrapper/Wrapper";
+import Navbar from "@/components/navbar/Navbar";
+import Footer from "@/components/footer/Footer";
 
 const validCategories = {
-  sports: { color: 'green' },
-  news: { color: 'red' },
-  lifestyle: { color: 'yellow' },
-  music: { color: '#CC00FF' },
-  movies: { color: 'lightblue' },
+  sports: { color: "green" },
+  news: { color: "red" },
+  lifestyle: { color: "yellow" },
+  music: { color: "#CC00FF" },
+  movies: { color: "lightblue" },
 };
 
 const BlogCategoryLayout = ({ children, params }) => {
   const { category } = params;
 
-  // Normalize category to lowercase to ensure consistency with validCategories
   const normalizedCategory = category.toLowerCase();
 
-  // Check if the category is valid
   if (!(normalizedCategory in validCategories)) {
-    return notFound(); // This will render the 404 page
+    return notFound();
   }
 
   return (
     <>
       <Navbar />
       <Wrapper>
         <div className={styles.container}>
-          <h1 className={styles.title} style={{'--bg-color':validCategories[normalizedCategory].color}}>{normalizedCategory.charAt(0).toUpperCase() + normalizedCategory.slice(1)} Related Blogs</h1>
+          {children}
+          <h1
+            className={styles.title}
+            style={{ "--bg-color": validCategories[normalizedCategory].color }}
+          >
+            {normalizedCategory.charAt(0).toUpperCase() +
+              normalizedCategory.slice(1)}{" "}
+            Related Blogs
+          </h1>
           <div className={styles.content}>
             <div className={styles.blog}>
               <RecentPosts className={styles.itemOne} />
-              <Pagination width={'100%'} className={styles.button} />
+              <Pagination width={"100%"} className={styles.button} />
             </div>
-            <PopularPosts className={styles.itemTwo} borderRad='20px' marginBlock='5%' isOutline='2px' />
+            <PopularPosts
+              className={styles.itemTwo}
+              borderRad="20px"
+              marginBlock="5%"
+              isOutline="2px"
+            />
           </div>
         </div>
       </Wrapper>

src/app/category/[category]/layout.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 const BlogCategoryPage = () => {
-  return <></>; 
+  return <></>;
 };
 
 export default BlogCategoryPage;