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=
|
||||||
POSTGRES_URL_NON_POOLING=
|
|
||||||
POSTGRES_USER=
|
|
||||||
POSTGRES_HOST=
|
|
||||||
POSTGRES_PASSWORD=
|
|
||||||
POSTGRES_DATABASE=
|
|
|
@ -4,7 +4,7 @@ This example shows how you can build forms with Next.js and Server Actions.
|
||||||
|
|
||||||
## Deploy your own
|
## 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
|
## How to use
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,24 @@
|
||||||
'use server'
|
'use server'
|
||||||
|
|
||||||
import { revalidatePath } from 'next/cache'
|
import { revalidatePath } from 'next/cache'
|
||||||
import { sql } from '@vercel/postgres'
|
import postgres from 'postgres'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, {
|
||||||
|
ssl: 'allow',
|
||||||
|
})
|
||||||
|
|
||||||
// CREATE TABLE todos (
|
// CREATE TABLE todos (
|
||||||
// id SERIAL PRIMARY KEY,
|
// id SERIAL PRIMARY KEY,
|
||||||
// text TEXT NOT NULL
|
// 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({
|
const schema = z.object({
|
||||||
todo: z.string().min(1),
|
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({
|
const schema = z.object({
|
||||||
id: z.string().min(1),
|
id: z.string().min(1),
|
||||||
todo: z.string().min(1),
|
todo: z.string().min(1),
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { experimental_useFormState as useFormState } from 'react-dom'
|
import { useFormState } from 'react-dom'
|
||||||
import { useFormStatus } from 'react-dom'
|
import { useFormStatus } from 'react-dom'
|
||||||
import { createTodo } from '@/app/actions'
|
import { createTodo } from '@/app/actions'
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
message: null,
|
message: '',
|
||||||
}
|
}
|
||||||
|
|
||||||
function SubmitButton() {
|
function SubmitButton() {
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { useFormState, useFormStatus } from 'react-dom'
|
||||||
import { deleteTodo } from '@/app/actions'
|
import { deleteTodo } from '@/app/actions'
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
message: null,
|
message: '',
|
||||||
}
|
}
|
||||||
|
|
||||||
function DeleteButton() {
|
function DeleteButton() {
|
||||||
|
|
|
@ -1,13 +1,14 @@
|
||||||
import { sql } from '@vercel/postgres'
|
import postgres from 'postgres'
|
||||||
|
|
||||||
import { AddForm } from '@/app/add-form'
|
import { AddForm } from '@/app/add-form'
|
||||||
import { DeleteForm } from '@/app/delete-form'
|
import { DeleteForm } from '@/app/delete-form'
|
||||||
|
|
||||||
export const runtime = 'edge'
|
let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, {
|
||||||
export const preferredRegion = 'home'
|
ssl: 'allow',
|
||||||
|
})
|
||||||
|
|
||||||
export default async function Home() {
|
export default async function Home() {
|
||||||
let data = await sql`SELECT * FROM todos`
|
let todos = await sql`SELECT * FROM todos`
|
||||||
const { rows: todos } = data
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<main>
|
||||||
|
|
|
@ -1,4 +0,0 @@
|
||||||
/** @type {import('next').NextConfig} */
|
|
||||||
const nextConfig = {}
|
|
||||||
|
|
||||||
module.exports = nextConfig
|
|
|
@ -1,19 +1,19 @@
|
||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev --turbo",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/node": "20.5.1",
|
"@types/node": "20.10.6",
|
||||||
"@types/react": "18.2.20",
|
"@types/react": "18.2.46",
|
||||||
"@types/react-dom": "18.2.7",
|
"@types/react-dom": "18.2.18",
|
||||||
"@vercel/postgres": "0.4.1",
|
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
|
"postgres": "^3.4.3",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"typescript": "5.1.6",
|
"typescript": "5.3.3",
|
||||||
"zod": "^3.22.2"
|
"zod": "^3.22.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue