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`
This commit is contained in:
parent
33f9b344d7
commit
9986e82263
8 changed files with 38 additions and 32 deletions
|
@ -1,6 +1 @@
|
|||
POSTGRES_URL=
|
||||
POSTGRES_URL_NON_POOLING=
|
||||
POSTGRES_USER=
|
||||
POSTGRES_HOST=
|
||||
POSTGRES_PASSWORD=
|
||||
POSTGRES_DATABASE=
|
||||
POSTGRES_URL=
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -4,7 +4,7 @@ import { useFormState, useFormStatus } from 'react-dom'
|
|||
import { deleteTodo } from '@/app/actions'
|
||||
|
||||
const initialState = {
|
||||
message: null,
|
||||
message: '',
|
||||
}
|
||||
|
||||
function DeleteButton() {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
|
||||
module.exports = nextConfig
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue