Server side code not being render on the screen

[winged prairie]

`import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { revalidatePath } from "next/cache";

// export default function addWater() {
// return <h1>page to add water type</h1>
// }
export default async function AddWaterForm(prevState: any, formData: FormData){

const addWaterType = async (formData: FormData) => {
  'use server'
    try{   
      const name = formData.get('name')
      const price = formData.get('price')
      const supabase = createServerComponentClient({ cookies})
      await supabase.from('water_type').insert({name, price}).select()
      revalidatePath('/waterTypes')
    }catch(err){
      console.log(err)
    }
}

console.log(prevState, "previous state")
console.log(formData,"form data")

return (
    <form action={addWaterType}>
        <input name="name" />
        <input name="price"/>
    </form>
)

}``

[cunning cedar]

Hi @winged prairie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[winged prairie]

and I already have this: module.exports = {
experimental: {
serverActions: true,
},
}

[cunning cedar]

---

Your code seems to be a mix of a Server Action and a Client Component in Next.js. Here's a breakdown of what you're trying to achieve and how you can do it based on the information extracts:

1. You're trying to create a form that allows users to add a water type. This form takes in a name and a price.

2. When the form is submitted, you want to insert this data into your Supabase database.

3. After the data is successfully inserted, you want to revalidate the path '/waterTypes' to ensure the latest data is displayed.

Here's how you can achieve this:

First, create a Server Action that handles the form submission and database insertion. This is where you'll use the revalidatePath function to revalidate the '/waterTypes' path after the data is inserted.

// app/actions/addWaterType.ts
'use server'
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { revalidatePath } from "next/cache";

export async function addWaterType(formData: FormData) {
  try {
    const name = formData.get('name')
    const price = formData.get('price')
    const supabase = createServerComponentClient({ cookies })
    await supabase.from('water_type').insert({name, price}).select()
    revalidatePath('/waterTypes')
    return { message: 'Success!' }
  } catch (e) {
    return { message: 'There was an error.' }
  }
}

Then, create a Client Component that renders the form and calls the Server Action when the form is submitted.

// app/pages/addWaterType.tsx
'use client'
import { addWaterType } from '../actions/addWaterType'
import { useState } from 'react'

export default function AddWaterForm() {
  const [message, setMessage] = useState<string>('')

  async function onSubmit(formData: FormData) {
    const res = await addWaterType(formData)
    setMessage(res.message)
  }

return (
<form action={onSubmit}>
<input type="text" name="name" />
<input type="text" name="price" />
<button type="submit">Add</button>
<p>{message}</p>
</form>
)
}

Please note that this is a simplified example and you might need to adjust it according to your needs. For more information, you can refer to the Next.js documentation on **Server Actions** (<https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions>) and **Forms and Mutations** (<https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

@winged prairie kapa.ai is still learning and improving, please let us know how it did by reacting below

[winged prairie]

so I still need the use server even in Nextjs13, the newest version?

[winged prairie]

@cunning cedar

[cunning cedar]

Let me check the knowledge base for you. One moment! :books:

Sorry @winged prairie, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[winged prairie]

@cunning cedar

[cunning cedar]

Let me check the knowledge base for you. One moment! :books: