I'm trying to use useFormStatus() to change UI dynamically when the form is submitted and it's waiting to fetch the data. I have a form component like function onSubmit(data: z.infer<typeof FormSchema>) { requestImg(data).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const…
This is my server/server.js: import express from "express"; import React from "react"; import ReactDOMServer, { renderToString } from 'react-dom/server'; import App from '../src/App'; const PORT = 4000; const app = express(); app.use(express.static('./build', {index: false})); app.get('/', (req, res) => { const…
Im making a chat app. I have a sidebar which displays the chats with your already created conversations. I want to make this sidebar responsive (like closing and opening it on mobile) I have this code (Sidebar.tsx): import React, {…
I did everything according to the documentation, but there is no server rendering I have created a page app/layout.tsx export default async function RootLayout({children}: {children: React.ReactNode}) { const queryClient = getQueryClient() const dehydratedState = dehydrate(queryClient) return ( <html> <body> <Providers>…
I'm using server-side rendering on my page.tsx and I have created a component named AdToCart for my button: AdToCart component: "use client"; import React from "react"; import Button from "@mui/material/Button"; const AddToCart = (props) => { const test = props;…
I am making a simpe "email confirm" page. It gets confirm key from URL, sends a POST request to API which returns true or nothing. If key is correct the API removes it from database and returns true so the…
I'm trying to serve a static page in Next.js with responsive design for different device sizes. I am using both CSS media queries as well as JS responsive tools so it should have different layout for different screen sizes. For…
I have been trying to display html templates of Login and Register for an ecommerce website, using Django Framework and Python as server side scripting language. I want to make sure that If Users logs in using its email address…
I am using an external react component that is imported into my nextjs app code, this is how the component looks like <AppBar className={clsx(classes.header)}> </AppBar> export const header = makeStyles((theme) => ({ header: { [theme.breakpoints.down('md')]: { padding: `0 ${theme.spacing(4)}px`, },…
I am new to NextJS so the question might sound a trivial so please bear with me. So, basically I want to fetch data from a database and display it in the page at the first render and for that…