nextjs-prisma-postgresql

aa55e3fc · Hòa Thanh · d93711d7 · aa55e3fc · aa55e3fc · aa55e3fc
Commit aa55e3fc authored 1 year ago by Hòa Thanh
--- a/.env
+++ b/.env
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="postgresql://hoadev:hoadev123@localhost:5432/hoadev_db?schema=public"
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,20 +8,24 @@
      "name": "example-crud-using-nextjs-prisma-postgresql",
      "version": "0.1.0",
      "dependencies": {
+        "@prisma/client": "^5.6.0",
        "next": "14.0.3",
        "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "swr": "^2.2.4"
      },
      "devDependencies": {
-        "@types/node": "^20",
+        "@types/node": "^20.9.1",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "autoprefixer": "^10.0.1",
        "eslint": "^8",
        "eslint-config-next": "14.0.3",
        "postcss": "^8",
+        "prisma": "^5.6.0",
        "tailwindcss": "^3.3.0",
-        "typescript": "^5"
+        "ts-node": "^10.9.1",
+        "typescript": "^5.2.2"
      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
@@ -57,6 +61,28 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -378,6 +404,38 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@prisma/client": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.6.0.tgz",
+      "integrity": "sha512-mUDefQFa1wWqk4+JhKPYq8BdVoFk9NFMBXUI8jAkBfQTtgx8WPx02U2HB/XbAz3GSUJpeJOKJQtNvaAIDs6sug==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/engines-version": "5.6.0-32.e95e739751f42d8ca026f6b910f5a2dc5adeaeee"
+      },
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/engines": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.6.0.tgz",
+      "integrity": "sha512-Mt2q+GNJpU2vFn6kif24oRSBQv1KOkYaterQsi0k2/lA+dLvhRX6Lm26gon6PYHwUM8/h8KRgXIUMU0PCLB6bw==",
+      "devOptional": true,
+      "hasInstallScript": true
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "5.6.0-32.e95e739751f42d8ca026f6b910f5a2dc5adeaeee",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.6.0-32.e95e739751f42d8ca026f6b910f5a2dc5adeaeee.tgz",
+      "integrity": "sha512-UoFgbV1awGL/3wXuUK3GDaX2SolqczeeJ5b4FVec9tzeGbSWJboPSbT0psSrmgYAKiKnkOPFSLlH6+b+IyOwAw=="
+    },
    "node_modules/@rushstack/eslint-patch": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
@@ -392,6 +450,30 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true
+    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -568,6 +650,15 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/ajv": {
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1084,6 +1175,12 @@
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
      "dev": true
    },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1191,6 +1288,15 @@
      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
      "dev": true
    },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
    "node_modules/dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2804,6 +2910,12 @@
        "node": ">=10"
      }
    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
+    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3367,6 +3479,22 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prisma": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.6.0.tgz",
+      "integrity": "sha512-EEaccku4ZGshdr2cthYHhf7iyvCcXqwJDvnoQRAJg5ge2Tzpv0e2BaMCp+CbbDUwoVTzwgOap9Zp+d4jFa2O9A==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/engines": "5.6.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=16.13"
+      }
+    },
    "node_modules/prop-types": {
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3913,6 +4041,18 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/swr": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
+      "integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
@@ -4016,6 +4156,55 @@
      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
      "dev": true
    },
+    "node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "dev": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
    "node_modules/tsconfig-paths": {
      "version": "3.14.2",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -4195,12 +4384,26 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "dev": true
    },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -4325,6 +4528,15 @@
        "node": ">= 14"
      }
    },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

--- a/package.json
+++ b/package.json
@@ -9,19 +9,23 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@prisma/client": "^5.6.0",
+    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18",
-    "next": "14.0.3"
+    "swr": "^2.2.4"
  },
  "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
+    "@types/node": "^20.9.1",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.3",
    "postcss": "^8",
+    "prisma": "^5.6.0",
    "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.3"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
  }
 }
--- a/prisma/migrations/20231118020557_init/migration.sql
+++ b/prisma/migrations/20231118020557_init/migration.sql
+-- CreateTable
+CREATE TABLE "User" (
+    "id" SERIAL NOT NULL,
+    "email" TEXT NOT NULL,
+    "name" TEXT,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT,
+    "published" BOOLEAN NOT NULL DEFAULT false,
+    "authorId" INTEGER NOT NULL,
+
+    CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- AddForeignKey
+ALTER TABLE "Post" ADD CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/prisma/migrations/migration_lock.toml
+++ b/prisma/migrations/migration_lock.toml
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"
\ No newline at end of file
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+  posts Post[]
+}
+
+model Post {
+  id        Int     @id @default(autoincrement())
+  title     String
+  content   String?
+  published Boolean @default(false)
+  author    User    @relation(fields: [authorId], references: [id])
+  authorId  Int
+}
\ No newline at end of file
--- a/src/app/(route)/api/posts/[id]/route.ts
+++ b/src/app/(route)/api/posts/[id]/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import prisma from '../../../../_lib/prisma';
+export async function GET(request : NextRequest,{ params }: { params: { id: number } }) {
+    const id =  params.id
+    if (!id) {
+        return NextResponse.error("Missing 'id' parameter");
+      }
+      
+      const post = await prisma.post.findUnique({
+        where: {
+          id: parseInt(id),
+        },
+        include: {
+          author: {
+            select: { name: true },
+          },
+        },
+      });
+      
+      return NextResponse.json(post);
+}
+export async function PUT(request : NextRequest,{ params }: { params: { id: number } }) {
+    const id =  params.id
+    if (!id) {
+      return NextResponse.error("Missing 'id' parameter");
+    }
+    
+   const post = await prisma.post.findUnique({
+      where: {
+        id: parseInt(id),
+      },
+    }) 
+
+    const { title, content } = await request.json();
+     const updatedPost = await prisma.post.update({
+      where: {
+        id: parseInt(id),
+      },
+      data: {
+        title: title,
+        content: content,
+
+      },
+    });
+     
+    return NextResponse.json({success:1,"post":updatedPost,"message":"Update success"});
+}
+
+export async function DELETE(request : NextRequest,{ params }: { params: { id: number } }) {
+  const id =  params.id
+  if (!id) {
+    return NextResponse.error("Missing 'id' parameter");
+  }
+  
+ const deletePost = await prisma.post.delete({
+    where: {
+      id: parseInt(id),
+    },
+  }) 
+
+   
+  return NextResponse.json({success:1,"message":"Delete success"});
+}
+
+
--- a/src/app/(route)/api/posts/route.ts
+++ b/src/app/(route)/api/posts/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import prisma from '../../../_lib/prisma';
+export async function GET() {
+    const posts = await prisma.post.findMany({
+      /*   where: { published: true }, */
+        include: {
+          author: {
+            select: { name: true },
+          },
+        },
+      });
+
+    return NextResponse.json(posts);
+}
+
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  const { title, content,published ,authorId} = body;
+ 
+  const newPost = await prisma.post.create({
+    data: {
+      title: title,
+      content: content,
+      author: { connect: { id:  authorId } },
+     
+    },
+    include: {
+      author: true,
+    },
+  });
+  return NextResponse.json({"success":1,"message":"create success","post":newPost});
+}
+
--- a/src/app/(route)/post/create/page.tsx
+++ b/src/app/(route)/post/create/page.tsx
+'use client'
+import React,{ useState} from 'react'
+import { useRouter } from 'next/navigation'
+const CreatePage = ({params} :{params:{id:number}}) => {
+    const route = useRouter()
+    const [title, setTitle] = useState('')
+    const [content, setContent] = useState('')
+    const saveData = (e : any)=>{
+        e.preventDefault();
+        if(title!="" && content !=""){
+            var data = {
+                "title":title,
+                "content":content,
+                "published":true,
+                "authorId":1
+            }
+            console.log(data);
+            fetch(`/api/posts`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body:JSON.stringify(data),
+            })
+            .then((response) => response.json())
+            .then((data) => {
+                if(data.success>0){
+                    alert(data.message);
+                    route.push('/post')
+                }
+            })
+        }
+
+    }
+    return <div className="w-full max-w-5xl m-auto">
+        <h1 className="text-3xl font-bold">Create</h1>
+        <form onSubmit={saveData}>
+            <input type="text" name="title" id="title" className="border border-slate-300 p-1 m-1"  onChange={e => setTitle(e.target.value)}/>
+            <input type="text" name="content" id="content" className="border border-slate-300 p-1 m-1"  onChange={e => setContent(e.target.value)}/>
+            <input type="submit" value="submit" className="border border-slate-300 p-1 m-1" />
+        </form>
+    </div>
+}
+export default CreatePage
\ No newline at end of file
--- a/src/app/(route)/post/delete/[id]/page.tsx
+++ b/src/app/(route)/post/delete/[id]/page.tsx
+'use client'
+import React from 'react'
+import useSWR from "swr";
+import { useRouter } from 'next/navigation'
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+const ReadPage = ({params} :{params:{id:number}}) => {
+    const router = useRouter();
+    const { data: post, error, isLoading } = useSWR<any>(`/api/posts/`+params.id, fetcher);
+    const deletePost = (id)=>{
+        fetch(`/api/posts/`+id, {
+            method: 'DELETE',
+        })
+        .then((response) => response.json())
+        .then((data) => {
+            if(data.success>0){
+                alert(data.message);
+                router.push('/post')
+            }
+        })
+    }
+    if(error) return <div>failed to load</div>
+    if(isLoading) return <div>loading...</div>
+    return <div className="w-full max-w-5xl m-auto">
+        <h1 className="text-3xl font-bold">Read Post</h1>
+        <p className="text-2xl">{post?.title}</p>
+        <p className="text-2xl">{post?.content}</p>
+        <button className="bg-red-500 font-bold p-1 inline-block rounded-md text-white" onClick={()=>deletePost(params.id)}>Remove Post</button>
+    </div>
+}
+export default ReadPage
\ No newline at end of file
--- a/src/app/(route)/post/edit/[id]/page.tsx
+++ b/src/app/(route)/post/edit/[id]/page.tsx
+'use client'
+import React,{useEffect, useState} from 'react'
+import { useRouter } from 'next/navigation'
+import useSWR from "swr";
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+const EditPage = ({params} :{params:{id:number}}) => {
+    const router = useRouter();
+    const [title, setTitle] = useState('')
+    const [content, setContent] = useState('')
+    const { data: post, error, isLoading } = useSWR<any>(`/api/posts/`+params.id, fetcher);
+    useEffect(()=>{
+        if(post){
+            setTitle(post.title);
+            setContent(post.content);
+        }
+    },[post])
+    const saveData = (e)=>{
+        e.preventDefault();
+        if(title!="" && content !=""){
+            var data = {
+                "title":title,
+                "content":content
+            }
+            console.log(data);
+            fetch(`/api/posts/`+params.id, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body:JSON.stringify(data),
+            })
+            .then((response) => response.json())
+            .then((data) => {
+                if(data.success>0){
+                    alert(data.message);
+                    router.push('/post')
+                }
+            })
+        }
+
+    }
+    if(error) return <div>failed to load</div>
+    if(isLoading) return <div>loading...</div>
+    return <div className="w-full max-w-5xl m-auto">
+        <h1 className="text-3xl font-bold">Edit</h1>
+        <form onSubmit={saveData}>
+            <input type="text" name="title" id="title" className="border border-slate-300 p-1 m-1" value={title} onChange={e => setTitle(e.target.value)}/>
+            <input type="text" name="content" id="content" className="border border-slate-300 p-1 m-1" value={content} onChange={e => setContent(e.target.value)}/>
+            <input type="submit" value="submit" className="border border-slate-300 p-1 m-1" />
+        </form>
+    </div>
+}
+export default EditPage
\ No newline at end of file
--- a/src/app/(route)/post/page.tsx
+++ b/src/app/(route)/post/page.tsx
+'use client'
+import Link from 'next/link';
+import useSWR from 'swr';
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+const PostPage = () => {
+    const { data: posts, error, isLoading } = useSWR<any>(`/api/posts`, fetcher);
+    if(error) return <div>failed to load</div>
+    if(isLoading) return <div>loading...</div>
+    return (
+        <div className="w-full max-w-5xl m-auto">
+            <h1 className='text-3xl text-blue-500 text-center pt-10 font-bold underline'>List Posts</h1>
+            <Link href="/post/create" className='text-xl text-blue-500 text-center p-1 font-bold underline'>Create Post</Link>
+           <table className='w-full mt-10 border-separate border-spacing-2 border border-slate-400'>
+                <tr>
+                <th className='border border-slate-300 p-2'>ID</th>
+                    <th className='border border-slate-300 p-2'>Title</th>
+                    <th className='border border-slate-300 p-2'>Content</th>
+                    <th className='border border-slate-300 p-2'>User</th>
+                    <th className='border border-slate-300 p-2'>Pushlish</th>
+                    <th className='border border-slate-300 p-2'>Modify</th>
+                </tr>
+                {posts?.map(post => 
+                    {
+                        return (
+                            <tr>
+                                <td className='border border-slate-300 p-2'>{post.id}</td>
+                                <td className='border border-slate-300 p-2'>{post.title}</td>
+                                <td className='border border-slate-300 p-2'>{post.content}</td>
+                                <td className='border border-slate-300 p-2'>{post.author.name}</td>
+                                <td className='border border-slate-300 p-2'>{post.published?"Success":"pending"}</td>
+                                <td className='border border-slate-300 p-2 flex flex-row gap-2'>
+                                    <Link href={`/post/edit/${post.id}`} className='bg-yellow-500 font-bold p-1 inline-block rounded-md text-white'>Edit</Link>
+                                    <Link href={`/post/delete/${post.id}`} className='bg-red-500 font-bold p-1 inline-block rounded-md text-white'>Delete</Link>
+                                    <Link href={`/post/read/${post.id}`} className='bg-blue-500 font-bold p-1 inline-block rounded-md text-white'>View</Link>
+                                </td>
+                            </tr>
+                        )
+                    }
+                )}
+
+
+           </table>
+        </div>
+    );
+   
+}
+
+
+export default PostPage;
\ No newline at end of file
--- a/src/app/(route)/post/read/[id]/page.tsx
+++ b/src/app/(route)/post/read/[id]/page.tsx
+'use client'
+import React from 'react'
+import useSWR from "swr";
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+const ReadPage = ({params} :{params:{id:number}}) => {
+    const { data: post, error, isLoading } = useSWR<any>(`/api/posts/`+params.id, fetcher);
+    if(error) return <div>failed to load</div>
+    if(isLoading) return <div>loading...</div>
+    return <div className="w-full max-w-5xl m-auto">
+        <h1 className="text-3xl font-bold">Read Post</h1>
+        <p className="text-2xl">{post?.title}</p>
+        <p className="text-2xl">{post?.content}</p>
+    </div>
+}
+export default ReadPage
\ No newline at end of file
--- a/src/app/_lib/prisma.ts
+++ b/src/app/_lib/prisma.ts
+import { PrismaClient } from '@prisma/client';
+
+let prisma: PrismaClient;
+
+if (process.env.NODE_ENV === 'production') {
+  prisma = new PrismaClient();
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient();
+  }
+  prisma = global.prisma;
+}
+
+export default prisma;
\ No newline at end of file
--- a/src/app/globals.css
+++ b/src/app/globals.css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
 import Image from 'next/image'
+import PostPage from './(route)/post/page'

 export default function Home() {
  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
+   <PostPage />
  )
 }