React Server Components is a subset of React.js, it allows loading components from the backend. The components have already been rendered in the backend and can be seamlessly integrated into the running app. This feature is still in experiment.
Questions tagged [react-server-components]
123 questions
0
votes
0 answers
Why do I get [next-auth][error][CLIENT_FETCH_ERROR] when I try to use my custom login form with NextAuth?
I'm trying to create a custom login page with next-auth, I created my file and call the signIn function but I end up having a error message [next-auth][error][CLIENT_FETCH_ERROR], https://next-auth.js.org/errors#client_fetch_error Failed to fetch…
mato073
- 1
- 1
0
votes
0 answers
Why does router.push() refresh my page when typing Arabic or Persian characters in Next.js 13?
I have simple search input and button when I click button the input value catch by state and push url with query string to Next.js 13 server component and fetch some data by query string
const getBrands = async (slug: string = "") => {
const res =…
Vahid MV
- 11
- 2
0
votes
0 answers
How to apply permanent redirect in Next JS 13
In Next JS 12 if you want to redirect you used to return an object from getServerSideProps that holds the distination path and if it is a permanent redirect or not
return {
redirect: {
destination: "/",
permanent : true
},
…
M7mod Bakr
- 127
- 5
0
votes
0 answers
NextJs - Compute base for Link href based on folder structure
I'm creating an app using the App Router pattern in Nextjs.
I have a folder structure that looks like this:
From inside the level-1 page, I would like to link to level-1/level-2.
Obviously I can do this by hardcoding href to level-1/level-2.…
sarincasm
- 477
- 3
- 9
0
votes
0 answers
Getting `DYNAMIC_SERVER_USAGE` when importing dynamic component with ssr false in NextJs AppDir
I am getting the following error while importing a component dynamically with ssr turned off in NextJs 13 AppDir:
Code of the component being imported is as follows:
"use client";
import { useTheme } from "next-themes";
import { HiMoon, HiSun }…
Farasat Ali
- 398
- 3
- 6
0
votes
2 answers
Why I cannot use `useState` in a child component in Next.js 13?
a new update in NextJS came out (with app router). I am really confused by the client/server side component relationships. I am currently experimenting with it, and it says in the docs that:
"use client" sits between server-only and client code.…
alEN
- 77
- 1
- 6
0
votes
0 answers
Redux toolkit is not being integrated with nextjs 13 app
My redux toolkit is not working in my nextjs 13 e-commerce app. I also using the technique to wrap the app with custom 'use-client' provider to provide store.
But app is crashing and giving error here is the screen shot is attached
Screen shot of…
aamir rashid
- 1
- 1
0
votes
0 answers
Error: Could not find client component (Shopify Hydrogen + Oxygen)
When working on localhost development for months, our team has had no issues with hydration mismatch errors. However, when running the out-of-the-box Hydrogen preview command npm run preview, or in a deployed environment via the Shopify Hydrogen…
0
votes
0 answers
How to use component props from MDX with Codehike Bright in NextJS
I am using Codehike Bright with NextJS 13.2 and the app directory (using React Server Components).
I am also using MDX.
This is the TSX file that loads the MDX content and passes a version prop - page.tsx:
import Content from './content.mdx'
export…
caprica
- 3,902
- 4
- 19
- 39
0
votes
0 answers
Cannot bundle for react-server-dom-webpack
Webpack bundling is taken long time and finally failed when I add createFromFetch of react-server-dom-webpack/client.
If I remove createFromFetch from the code, bundling is finished soon.
After failed, dist dir has many bundler files.
This is the…
dhythm
- 11
- 2
0
votes
0 answers
next13 state management in the app directory
How to persist data between server components in NEXT13 app directory?
I'm fetching api to check if user is authorized (from cookies saved in login) in the root layout and I want to save the response (contains the user Id) for later usage. Is that…
0
votes
1 answer
pre render Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D
This is my page code todolist.js
import Todo from "./todo";
const getTodos = async () => {
let todos = await fetch("/api/todo/list");
return todos.json();
};
export default async function TodoList() {
const { todos } = await…
maztt
- 12,278
- 21
- 78
- 153
0
votes
0 answers
NextJS13 — How can I use a custom hook in a server component?
The goal for me is to retrieve some data from the server component then use a hook to store that data into local storage. I made a custom hook called useSettings that stores the data into local storage after the server component Pages gets the data…
Jae
- 86
- 1
- 11
0
votes
0 answers
React Server Components and Webpack unexpected token when server launch
I'm making tests on React Server Components with a co-worker's project, and I'm blocking on an error which is providing from react-bootstrap.
I can build the project, webpack made it good, with no errors, but when I'm starting the server, I have…
Adrien Dubois
- 48
- 7
0
votes
0 answers
Selected state on nav item in Next 13
I want to have a selected state on a nav item in next 13, I could find no way of getting any context on a server component so ended up with a client component like this
'use client';
import Image from 'next/image';
import Styles from…
Matthew Barnden
- 516
- 1
- 6
- 15