NEXT JS Static Website Unhandled Runtime Error: Error: Failed to load chunk static/chunks/node_modules_85ff16._.js from module

I checked a similar Q&A on the forums but could not find the answer I was looking for. I am developing a static website with NextJS, Framer Motion, Tailwind, and SCSS. Everything was fine until I tried to optimize the code for the SEO. I added a new component for it. Also, I tried to implement Dynamic Rendering for Crawlers by middleware. I am getting lots of errors as follows:

 GET http://localhost:3000/_next/static/chunks/src_components_Layout_AnimatedContainer_tsx_0c04e6._.jsnet::ERR_ABORTED 404 (Not Found)

 GET http://localhost:3000/_next/static/chunks/node_modules_85ff16._.js net::ERR_ABORTED 404 (Not Found)

 GET http://localhost:3000/_next/static/chunks/src_app_not-found_tsx_38db3b._.js net::ERR_ABORTED 404 (Not Found)

I tried to do many things, I asked GPT and Cursor. They keep modifying my config files but I don't get any good results. When I use hard reset on the browser, I can access the website but all styling is broken.

I am adding the relevant code here, please let me know if you need more details. Thank you so much

AnimatedContainer.tsx

"use client";

import { motion } from 'framer-motion';
import { PropsWithChildren } from "react";
import type { MotionProps } from "framer-motion";

type AnimationProps = {
  initial?: MotionProps["initial"];
  animate?: MotionProps["animate"];
  exit?: MotionProps["exit"];
  whileInView?: MotionProps["whileInView"];
  viewport?: MotionProps["viewport"];
  transition?: MotionProps["transition"];
  whileHover?: MotionProps["whileHover"];
  whileTap?: MotionProps["whileTap"];
};

interface AnimatedContainerProps extends PropsWithChildren {
  className?: string;
  animation?: AnimationProps;
}

export default function AnimatedContainer({ 
  children, 
  className, 
  animation 
}: AnimatedContainerProps) {
  return (
    <motion.div
      className={className}
      {...animation}
    >
      {children}
    </motion.div>
  );
} 

next.config.mjs

import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Basic configuration
  output: 'standalone',
  poweredByHeader: false,

  // Image configuration
  images: {
    domains: ['images.unsplash.com', 'images.pexels.com', 'randomuser.me'],
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 60 * 60 * 24 * 7, // 7 days
  },

  // SASS configuration
  sassOptions: {
    includePaths: ['./src/styles'],
  },

  // Static file serving configuration
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

package.json

{
  "name": "kibris-dekorasyon",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@formatjs/intl-localematcher": "^0.6.0",
    "@types/js-cookie": "^3.0.6",
    "flag-icons": "^7.3.2",
    "framer-motion": "^12.4.7",
    "js-cookie": "^3.0.5",
    "negotiator": "^1.0.0",
    "next": "14.1.0",
    "next-sitemap": "^4.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remixicon": "^4.6.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "css-loader": "^7.1.2",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "postcss-loader": "^8.1.1",
    "sass": "^1.85.0",
    "sass-loader": "^16.0.5",
    "style-loader": "^4.0.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}