diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1437c53
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/Procfile b/Procfile
new file mode 100644
index 0000000..709e0a2
--- /dev/null
+++ b/Procfile
@@ -0,0 +1 @@
+web: yarn start
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0f980ed
--- /dev/null
+++ b/README.md
@@ -0,0 +1,39 @@
+---
+title: NextJS Prisma
+description: A NextJS app using Prisma with a PostgreSQL database
+tags:
+ - next
+ - prisma
+ - postgresql
+ - typescript
+---
+
+# NextJS Prisma Example
+
+This example is a [NextJS](https://nextjs.org/) todo app that uses
+[Prisma](https://www.prisma.io/) to store todos in Postgres.
+
+[](https://railway.app/new?template=https%3A%2F%2Fgithub.com%2Frailwayapp%2Fexamples%2Ftree%2Fmaster%2Fexamples%2Fnextjs-prisma&plugins=postgresql)
+
+## ✨ Features
+
+- Prisma
+- NextJS
+- Postgres
+- TypeScript
+
+## 💁♀️ How to use
+
+- [Provision a Postgres container on Railway](https://dev.new)
+- Connect to your Railway project with `railway link`
+- Migrate the database `railway run yarn migrate:dev`
+- Run the NextJS app `railway run yarn dev`
+
+## 📝 Notes
+
+This app is a simple todo list where the data is persisted to Postgres. [Prisma
+migrations](https://www.prisma.io/docs/concepts/components/prisma-migrate#prisma-migrate)
+can be created with `railway run yarn migrate:dev` and deployed with `railway run yarn migrate:deploy`. The Prisma client can be regenerated with
+`yarn generate`.
+
+[swr](https://swr.vercel.app/) is used to fetch data on the client and perform optimistic updates.
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..7b7aa2c
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..21b41e4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "with-nextjs-postgres",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "yarn migrate:deploy && next build",
+ "start": "next start --port ${PORT-3000}",
+ "migrate:dev": "prisma migrate dev --preview-feature",
+ "migrate:deploy": "prisma migrate deploy --preview-feature",
+ "migrate:status": "prisma migrate status --preview-feature",
+ "generate": "prisma generate"
+ },
+ "dependencies": {
+ "@prisma/client": "2.30.0",
+ "next": "12.1.0",
+ "pg": "^8.5.1",
+ "react": "17.0.1",
+ "react-dom": "17.0.1",
+ "swr": "^0.4.1"
+ },
+ "devDependencies": {
+ "prisma": "2.30.0",
+ "@types/node": "^14.14.22",
+ "@types/react": "^17.0.0",
+ "typescript": "^4.1.3"
+ }
+}
diff --git a/prisma/migrations/20210130000309_init/migration.sql b/prisma/migrations/20210130000309_init/migration.sql
new file mode 100644
index 0000000..f4c6c6e
--- /dev/null
+++ b/prisma/migrations/20210130000309_init/migration.sql
@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "Todo" (
+ "id" TEXT NOT NULL,
+ "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "text" TEXT NOT NULL,
+ "completed" BOOLEAN NOT NULL,
+
+ PRIMARY KEY ("id")
+);
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..2cdb8f0
--- /dev/null
+++ b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,2 @@
+# Please do not edit this file manually
+provider = "postgresql"
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
new file mode 100644
index 0000000..9a95238
--- /dev/null
+++ b/prisma/schema.prisma
@@ -0,0 +1,18 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+datasource db {
+ provider = "postgresql"
+ url = env("DATABASE_URL")
+}
+
+generator client {
+ provider = "prisma-client-js"
+}
+
+model Todo {
+ id String @id @default(uuid())
+ createdAt DateTime @default(now())
+ text String
+ completed Boolean
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..4965832
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/vercel.svg b/public/vercel.svg
new file mode 100644
index 0000000..fbf0e25
--- /dev/null
+++ b/public/vercel.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 0000000..28d9e60
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,42 @@
+import useSWR, { mutate } from "swr";
+import { Todo } from "./types";
+
+const todoPath = "/api/todos";
+
+export const useTodos = () => useSWR(todoPath);
+
+export const createTodo = async (text: string) => {
+ mutate(
+ todoPath,
+ todos => [{ text, completed: false, id: "new-todo" }, ...todos],
+ false,
+ );
+ await fetch(todoPath, {
+ method: "POST",
+ body: JSON.stringify({ text }),
+ });
+
+ mutate(todoPath);
+};
+
+export const toggleTodo = async (todo: Todo) => {
+ mutate(
+ todoPath,
+ todos =>
+ todos.map(t =>
+ t.id === todo.id ? { ...todo, completed: !t.completed } : t,
+ ),
+ false,
+ );
+ await fetch(`${todoPath}?todoId=${todo.id}`, {
+ method: "PUT",
+ body: JSON.stringify({ completed: !todo.completed }),
+ });
+ mutate(todoPath);
+};
+
+export const deleteTodo = async (id: string) => {
+ mutate(todoPath, todos => todos.filter(t => t.id !== id), false);
+ await fetch(`${todoPath}?todoId=${id}`, { method: "DELETE" });
+ mutate(todoPath);
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
new file mode 100644
index 0000000..1e1cec9
--- /dev/null
+++ b/src/pages/_app.tsx
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
diff --git a/src/pages/api/todos.ts b/src/pages/api/todos.ts
new file mode 100644
index 0000000..013fe3b
--- /dev/null
+++ b/src/pages/api/todos.ts
@@ -0,0 +1,38 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+ if (req.method === "GET") {
+ // get all todos
+ const todos = await prisma.todo.findMany({
+ orderBy: { createdAt: "desc" },
+ });
+ res.json(todos);
+ } else if (req.method === "POST") {
+ // create todo
+ const text = JSON.parse(req.body).text;
+ const todo = await prisma.todo.create({
+ data: { text, completed: false },
+ });
+
+ res.json(todo);
+ } else if (req.method === "PUT") {
+ // update todo
+ const id = req.query.todoId as string;
+ const data = JSON.parse(req.body);
+ const todo = await prisma.todo.update({
+ where: { id },
+ data,
+ });
+
+ res.json(todo);
+ } else if (req.method === "DELETE") {
+ // delete todo
+ const id = req.query.todoId as string;
+ await prisma.todo.delete({ where: { id } });
+
+ res.json({ status: "ok" });
+ }
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..061b2a9
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,95 @@
+import { NextPage } from "next";
+import Head from "next/head";
+import { useMemo, useState } from "react";
+import { createTodo, deleteTodo, toggleTodo, useTodos } from "../api";
+import styles from "../styles/Home.module.css";
+import { Todo } from "../types";
+
+export const TodoList: React.FC = () => {
+ const { data: todos, error } = useTodos();
+
+ if (error != null) return Error loading todos...
;
+ if (todos == null) return Loading...
;
+
+ if (todos.length === 0) {
+ return Try adding a todo ☝️️
;
+ }
+
+ return (
+
+ {todos.map(todo => (
+
+ ))}
+
+ );
+};
+
+const TodoItem: React.FC<{ todo: Todo }> = ({ todo }) => (
+
+
+
+
+
+);
+
+const AddTodoInput = () => {
+ const [text, setText] = useState("");
+
+ return (
+
+ );
+};
+
+const Home: NextPage = () => {
+ return (
+
+
+
Railway NextJS Prisma
+
+
+
+
+ Todos
+
+ NextJS app connected to Postgres using Prisma and hosted on{" "}
+ Railway
+
+
+
+
+
+
+
+
+