Javascript – Conditionally Render Image on Server in Next.js
I feel like I already know the answer to this, but just wanted to see if anyone had a solution for this. I have a hero banner where I have one image I want to show on mobile, but there's…
Reactjs – "localstorage is not defined" nextjs14 "use client" running in server side
I was configuring the context in Tailwind for a Next.js 14 website, and I just wanted to provide a global theme configuration for my project. So, I created the ThemeContext and added the 'use client' at the top of the…
Javascript – How to get localStorage item in layout.js?
Sorry for poor English, it is my second language. I am using Next.js 14. I want to make a function that checks localStorage item before moving user into a specific page. Else it redirects user to the home page. (Similar…
Javascript – hydration error in next.js when using the div tag instead of the main tag
I've encountered the hydration error in nextjs and on debugging I found that when I use the div tag instead of the main tag then it causes this issue. The error that I get Below is the code that caused…
Seo – What commands do you use with Laravel + Inertia to run an SSR server?
I have a Laravel + Inertia + VueJS app. I want to use SSR (server-side rendering) for better SEO. The commands I have used until now (with Inertia, but without SSR) have been these: npm run dev (to run the…
Reactjs – useFormStatus() is always false in NextJS
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…
Reactjs – Error using renderToString in React.js to enable server-side rendering using express
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…
Reactjs – Next.Js 14 sidebar with hamburger menu
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, {…
Reactjs – How to use SSR in nextjs 14 + react-query?
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>…
Reactjs – How should I pass this on to my component?
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;…