ok

Author: codewithryugen

.env

@@ -0,0 +1,2 @@
+MONGODB = 'mongodb://127.0.0.1:27017/ryugen'
+APP_URL = 'http://localhost:3000'

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.5",
+    "mongoose": "6.11.1",
     "next": "13.4.5",
+    "next-auth": "^4.22.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "swr": "^2.1.5"

src/app/api/auth/[...nextauth]/route.js

@@ -0,0 +1,15 @@
+import connect from "@/utils/db";
+import Post from "@/models/Post";
+import { NextResponse } from "next/server";
+
+export const GET = async (request,{params}) =>{
+    const {id} = params;
+    try {
+        await connect();
+        const post = await Post.findById(id);
+        return new NextResponse(JSON.stringify(post), { status: 200 });
+    } catch (err) {
+        return new NextResponse("Database Error", { status: 500 });
+    }
+}
+

src/app/api/posts/[id]/route.js

@@ -0,0 +1,14 @@
+import connect from "@/utils/db";
+import Post from "@/models/Post";
+import { NextResponse } from "next/server";
+
+export const GET = async (request) =>{
+    try {
+        await connect();
+        const posts = await Post.find();
+        return new NextResponse(JSON.stringify(posts), { status: 200 });
+    } catch (err) {
+        return new NextResponse("Database Error", { status: 500 });
+    }
+}
+

src/app/api/posts/route.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import styles from './page.module.css'
+import Image from 'next/image'
+import {notFound} from 'next/navigation'
+
+async function getData(id) {
+  const res = await fetch(`${process.env.APP_URL}/api/posts/${id}`,{
+   cache:'no-store'
+  })
+  if (!res.ok) {
+    return notFound()
+  }
+ 
+  return res.json()
+}
+
+
+export async function generateMetadata ({params}){
+  const post = await getData(params.id);
+  return {
+    title:post.title,
+    description:post.desc
+  };
+}
+
+const Post = async ({params}) => {
+  const data = await getData(params.id);
+  return (
+    <div className={styles.container}>
+        <div className={styles.top}>
+          <div className={styles.info}>
+            <h1 className={styles.title}>{data.title}</h1>
+            <p className={styles.desc}>
+              {
+                data.desc
+              }
+            </p>
+            <div className={styles.author}>
+              <Image 
+              src='https://i.pinimg.com/564x/33/f7/f9/33f7f9739a50e708034b987544d2130d.jpg'
+              width={40}
+              height={40}
+              alt='author_img'
+              className={styles.avatar}
+              />
+              <span className={styles.username}>{data.username}</span>
+            </div>
+          </div>
+          <div className={styles.imgContainer}>
+            <Image
+              src={data.img}
+              fill={true}
+              className={styles.img}
+              alt='image post'
+            />
+          </div>
+        </div>
+        <div className={styles.content}>
+         {data.content}
+        </div>
+    </div>
+  )
+}
+
+export default Post

src/app/blog/[id]/page.jsx

@@ -1,17 +1,18 @@
+// "use client"
+
 import React from 'react'
 import styles from './page.module.css'
 import Link from 'next/link'
 import Image from 'next/image'
 
 
 async function getData() {
-  const res = await fetch('https://jsonplaceholder.typicode.com/posts',{
+  const res = await fetch(`${process.env.APP_URL}/api/posts`,{
    cache:'no-store'
   })
   if (!res.ok) {
     throw new Error('Failed to fetch data')
   }
- 
   return res.json()
 }
 
@@ -21,10 +22,10 @@ const Blog =  async () => {
     <div className={styles.mainContainer}>
       {
         data.map(item=>(
-        <Link href={`/blog/${item.id}`} className={styles.container} key={item.id}>
+        <Link href={`/blog/${item._id}`} className={styles.container} key={item._id}>
           <div className={styles.imgContainer}>
           <Image
-           src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
+           src={item.img}
            alt='image blog' 
            width={400}
            height={250}
@@ -33,7 +34,7 @@ const Blog =  async () => {
           </div>
           <div className={styles.content}>
             <h1 className={styles.title}>{item.title}</h1>
-            <p className={styles.description}>{item.body}</p>
+            <p className={styles.description}>{item.desc}</p>
           </div>
         </Link>
         ))

src/app/blog/[slug]/page.module.css renamed to src/app/blog/[id]/page.module.css

@@ -4,6 +4,11 @@ import Image from 'next/image';
 import Button from '@/components/button/Button';
 
 
+export const metadata = {
+  title: 'My portofolio || contact',
+  description: 'this is contact page',
+}
+
 const Contact = () => {
   return (
     <div className={styles.container}>