From 9986e822637ca70efd4de8e0cb923798b684f4b9 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sat, 30 Dec 2023 11:17:14 -0600 Subject: [PATCH] examples: Update next-forms example (#60052) - Remove `experimental_` import for `useFormStatus` - Update all dependencies - Move to `postgres` so it works with any Postgres provider - Fix a TypeScript issue - Use `next dev --turbo` --- examples/next-forms/.env.example | 7 +------ examples/next-forms/README.md | 2 +- examples/next-forms/app/actions.ts | 26 +++++++++++++++++++------ examples/next-forms/app/add-form.tsx | 4 ++-- examples/next-forms/app/delete-form.tsx | 2 +- examples/next-forms/app/page.tsx | 11 ++++++----- examples/next-forms/next.config.js | 4 ---- examples/next-forms/package.json | 14 ++++++------- 8 files changed, 38 insertions(+), 32 deletions(-) delete mode 100644 examples/next-forms/next.config.js diff --git a/examples/next-forms/.env.example b/examples/next-forms/.env.example index f5febb2996..c6e2c58e06 100644 --- a/examples/next-forms/.env.example +++ b/examples/next-forms/.env.example @@ -1,6 +1 @@ -POSTGRES_URL= -POSTGRES_URL_NON_POOLING= -POSTGRES_USER= -POSTGRES_HOST= -POSTGRES_PASSWORD= -POSTGRES_DATABASE= \ No newline at end of file +POSTGRES_URL= \ No newline at end of file diff --git a/examples/next-forms/README.md b/examples/next-forms/README.md index 284ae38797..35e10ad1b1 100644 --- a/examples/next-forms/README.md +++ b/examples/next-forms/README.md @@ -4,7 +4,7 @@ This example shows how you can build forms with Next.js and Server Actions. ## Deploy your own -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/next-forms&project-name=next-forms&repository-name=next-forms) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/next-forms&project-name=next-forms&repository-name=next-forms&stores=%5B%7B%22type%22%3A%22postgres%22%7D%5D) ## How to use diff --git a/examples/next-forms/app/actions.ts b/examples/next-forms/app/actions.ts index eff77252e9..d4ef39309b 100644 --- a/examples/next-forms/app/actions.ts +++ b/examples/next-forms/app/actions.ts @@ -1,15 +1,24 @@ 'use server' import { revalidatePath } from 'next/cache' -import { sql } from '@vercel/postgres' +import postgres from 'postgres' import { z } from 'zod' +let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, { + ssl: 'allow', +}) + // CREATE TABLE todos ( // id SERIAL PRIMARY KEY, // text TEXT NOT NULL // ); -export async function createTodo(prevState: any, formData: FormData) { +export async function createTodo( + prevState: { + message: string + }, + formData: FormData +) { const schema = z.object({ todo: z.string().min(1), }) @@ -25,9 +34,9 @@ export async function createTodo(prevState: any, formData: FormData) { try { await sql` - INSERT INTO todos (text) - VALUES (${data.todo}) - ` + INSERT INTO todos (text) + VALUES (${data.todo}) + ` revalidatePath('/') return { message: `Added todo ${data.todo}` } @@ -36,7 +45,12 @@ export async function createTodo(prevState: any, formData: FormData) { } } -export async function deleteTodo(prevState: any, formData: FormData) { +export async function deleteTodo( + prevState: { + message: string + }, + formData: FormData +) { const schema = z.object({ id: z.string().min(1), todo: z.string().min(1), diff --git a/examples/next-forms/app/add-form.tsx b/examples/next-forms/app/add-form.tsx index 45725efe1f..3f57db3039 100644 --- a/examples/next-forms/app/add-form.tsx +++ b/examples/next-forms/app/add-form.tsx @@ -1,11 +1,11 @@ 'use client' -import { experimental_useFormState as useFormState } from 'react-dom' +import { useFormState } from 'react-dom' import { useFormStatus } from 'react-dom' import { createTodo } from '@/app/actions' const initialState = { - message: null, + message: '', } function SubmitButton() { diff --git a/examples/next-forms/app/delete-form.tsx b/examples/next-forms/app/delete-form.tsx index 221b11f1a5..5d776b42b7 100644 --- a/examples/next-forms/app/delete-form.tsx +++ b/examples/next-forms/app/delete-form.tsx @@ -4,7 +4,7 @@ import { useFormState, useFormStatus } from 'react-dom' import { deleteTodo } from '@/app/actions' const initialState = { - message: null, + message: '', } function DeleteButton() { diff --git a/examples/next-forms/app/page.tsx b/examples/next-forms/app/page.tsx index b830b53faf..63c054b25b 100644 --- a/examples/next-forms/app/page.tsx +++ b/examples/next-forms/app/page.tsx @@ -1,13 +1,14 @@ -import { sql } from '@vercel/postgres' +import postgres from 'postgres' + import { AddForm } from '@/app/add-form' import { DeleteForm } from '@/app/delete-form' -export const runtime = 'edge' -export const preferredRegion = 'home' +let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, { + ssl: 'allow', +}) export default async function Home() { - let data = await sql`SELECT * FROM todos` - const { rows: todos } = data + let todos = await sql`SELECT * FROM todos` return (
diff --git a/examples/next-forms/next.config.js b/examples/next-forms/next.config.js deleted file mode 100644 index 767719fc4f..0000000000 --- a/examples/next-forms/next.config.js +++ /dev/null @@ -1,4 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = {} - -module.exports = nextConfig diff --git a/examples/next-forms/package.json b/examples/next-forms/package.json index c558339a8a..ed52ed4614 100644 --- a/examples/next-forms/package.json +++ b/examples/next-forms/package.json @@ -1,19 +1,19 @@ { "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev --turbo", "build": "next build", "start": "next start" }, "dependencies": { - "@types/node": "20.5.1", - "@types/react": "18.2.20", - "@types/react-dom": "18.2.7", - "@vercel/postgres": "0.4.1", + "@types/node": "20.10.6", + "@types/react": "18.2.46", + "@types/react-dom": "18.2.18", "next": "latest", + "postgres": "^3.4.3", "react": "18.2.0", "react-dom": "18.2.0", - "typescript": "5.1.6", - "zod": "^3.22.2" + "typescript": "5.3.3", + "zod": "^3.22.4" } }