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

@@ -1,6 +1 @@
 POSTGRES_URL=
-POSTGRES_URL_NON_POOLING=
-POSTGRES_USER=
-POSTGRES_HOST=
-POSTGRES_PASSWORD=
-POSTGRES_DATABASE=

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
 

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),
   })
@@ -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),

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() {

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() {

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 (
     <main>

examples/next-forms/next.config.js

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig

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"
   }
 }