"update all"

Author: mukharomdev

next.config.ts

@@ -2,6 +2,8 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  reactStrictMode: true,
+  //swcMinify: true, // Ensure SWC is enabled for faster builds
 
   output:"export",
   images: { unoptimized: true },

package.json

@@ -17,7 +17,7 @@
     "flowbite-react": "^0.10.2",
     "gray-matter": "^4.0.3",
     "matter-js": "^0.20.0",
-    "next": "15.1.7",
+    "next": "15.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-emoji-render": "^2.0.1",
@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@types/matter-js": "^0.19.8",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

pnpm-lock.yaml

@@ -1,9 +1,11 @@
-import MatterSimulation from '@/components/matter'
+"use client"
+
+import {MatterSimulation} from '@/components/matter'
 
 export default function Apps(){
 	return(
-		<section>
+		<div>
 		<MatterSimulation />
-		</section>
+		</div>
 	)
 }

src/app/apps/page.tsx

@@ -1,7 +1,11 @@
-import { useEffect, useRef } from 'react';
+"use client"
+
+import React, { useEffect, useRef } from 'react';
 import Matter from 'matter-js';
 
-const MatterSimulation = () => {
+
+
+export function MatterSimulation({ref}){
   const canvasRef = useRef(null);
 
   useEffect(() => {
@@ -83,11 +87,9 @@ const MatterSimulation = () => {
   }, []);
 
   return(
-    <div>
-    <canvas ref={canvasRef}>
-    </canvas>
+    <div> 
+    <canvas ref={canvasRef} /> 
     </div>
     );
 };
 
-export default MatterSimulation;