Confused about choosing Next.js for documentation.
Unanswered
Argente Brun posted this in #help-forum
Argente BrunOP
I am creating a new project. My backend is a Python API. I need to perform CRUD operations from the frontend. I have already implemented the GET method. How can I implement the other methods without using useState and useEffect?
async function getData() {
const res = await fetch('https://api.example.com/...')
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}19 Replies
@Argente Brun I am creating a new project. My backend is a Python API. I need to perform CRUD operations from the frontend. I have already implemented the GET method. How can I implement the other methods without using useState and useEffect?
async function getData() {
const res = await fetch('https://api.example.com/...')
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}
Where do you want to fetch the data? In Next.js "server" or Front end, browser javascript?
Argente BrunOP
I want to fetch data in server only. I don't want to use "use client".
@Argente Brun I am creating a new project. My backend is a Python API. I need to perform CRUD operations from the frontend. I have already implemented the GET method. How can I implement the other methods without using useState and useEffect?
async function getData() {
const res = await fetch('https://api.example.com/...')
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}
this code already fetches data in the server without "use client"
How can I implement the other methods without using useState and useEffect?You can do mutations without client components by doing something like this
return (
<form action={async () => {
"use server"
const res = await fetch('https://api.example.com/...', {
method: 'POST'
})
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}}>
<button>Do something</button>
</form>
)why do you not want to use "use client"?
Argente BrunOP
Because, i am new in nextjs, as a backend developer I don’t want to learn React query for now. So for CRUD operation i am looking for nextjs doc.
@ᴉuɐpɹɐɐ > How can I implement the other methods without using useState and useEffect?
You can do mutations without client components by doing something like this
tsx
return (
<form action={async () => {
"use server"
const res = await fetch('https://api.example.com/...', {
method: 'POST'
})
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}}>
<button>Do something</button>
</form>
)
Argente BrunOP
Could you give me the doc link about this code? Thanks.
@Argente Brun Could you give me the doc link about this code? Thanks.
Search up server action
You dont need to learn use query, not even use usestate and useeffect
But fair, use client is a rabbit hole
@ᴉuɐpɹɐɐ But fair, use client is a rabbit hole
Argente BrunOP
You are right. Appdir seems easy for me, but I wish the documentation were more resourceful.
@Argente Brun You are right. Appdir seems easy for me, but I wish the documentation were more resourceful.
Okay, fair, next.js docs requires some knowledge about React and how they work
Have you checked out the server action? Its not "use client" related
Let us know what still confuses you
Argente BrunOP
@ᴉuɐpɹɐɐ Thanks. Can you tell me whats wrong in my code?
`
import { redirect } from 'next/navigation'
export default function Page({ params }) {
const { slug } = params;
const addContent = async (FormData) => {
"use server";
preventDefault();
const res = await fetch(`http://127.0.0.1:8000/api/${slug}/update/`, {
method: 'PUT',
body: new FormData(target),
})
if (!res.ok) {
throw new Error('Failed to fetch data')
}
redirect('/')
}
return (
<>
<div>My Post: {params.slug}</div>
<form action={addContent} className='flex flex-col gap-3 px-3'>
<input className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:placeholder-gray-400' type="text" name="title" />
<textarea className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500' type="text" name="content"></textarea>
<button type='submit' className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center'>Submit</button>
</form>
</>
);
}This is my API endpoint:
Yakutian Laika
If the error says "Method GET is not allowed" it seems you need to add the attribute
method="put" in the <form> as by default is set to get.@Argente Brun <@194128415954173952> Thanks. Can you tell me whats wrong in my code?
import { redirect } from 'next/navigation'
export default function Page({ params }) {
const { slug } = params;
const addContent = async (FormData) => {
"use server";
preventDefault();
const res = await fetch(`http://127.0.0.1:8000/api/${slug}/update/`, {
method: 'PUT',
body: new FormData(target),
})
if (!res.ok) {
throw new Error('Failed to fetch data')
}
redirect('/')
}
return (
<>
<div>My Post: {params.slug}</div>
<form action={addContent} className='flex flex-col gap-3 px-3'>
<input className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:placeholder-gray-400' type="text" name="title" />
<textarea className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500' type="text" name="content"></textarea>
<button type='submit' className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center'>Submit</button>
</form>
</>
);
}
``
hi, practice pasting proper code blocks with discord's markdown syntax so people can better see your code with this format:
```tsx
paste code here
```
```tsx
paste code here
```
lgtm, what doesnt work?