I've successfully tested one isolated server component by using an async it and awaiting the output of a call to the component as a plain function to pass into render: it('renders the user data wh...

I'm trying to make a page transition with Next.js v14 but no success. No error is shown, the animation just does't work. I guess it's because the layout.tsx is rendered on the server. But how can I...

In my client component I want to create a new Todo: "use client"; const ClientComp:FC<{ createTodo: (title:string) => void }> = ({ createTodo }) => { return ( <button onC...

I’ve been playing with React Server Components for nearly 2 weeks now and this question has been making my brain hurt: how do you provide context to server components? Like for example, providing a...

What is the proper way to implement the "useEffect" front-end functionality in Next.JS server components? Tried to use useEffect in the server side but it does not work. Do the usage of a...

I am experimenting with Next.js 13 app directory and React 18's Server Components. Following the documentation I put an async fetch() call inside a Server Component and I mark the component as asyn...

I'm curious how we'd be able to go about accessing returned values from Next.js 13's alpha release of server actions. Here's the documentation from the Next team for reference. Let's say I have the...

So basically I have a server component in app dir and I want to get the pathname. I tried to do it using window.location but it does not work. Is there any way I can do this?

How do I use the my MUI (material ui) theme definition in a server component. I'm usually using the very useful useTheme hook. But this forces me to make it a client component, using the 'use clien...

In NextJs 13+ using the experimental App folder, async server components can be written, as described by the documentation: export default async function Page({ params: { username } }) { // Initia...

Im using nextJs for a while. Now initiating a new project using the app router (where traditional behavior is called the pages router). In the pages router, I could export getStaticProps to build p...

I have a server component InitView; const InitView = () => { useEffect(() => { }); return ( <> <Hero/> <span className="text-xl font-normal text-gray-100">Now...

I'm trying to set cookies inside the server actions function in Next.js 13.4.1. Example code import { cookies } from 'next/headers'; async function create(data) { 'use server'; cookies().set('n...

I've migrated my personal page to the app directoy with nextjs v13. I was trying adding loaders for RSCs first in the fallback prop of the Suspense component and also adding a loading component loc...

I am fetching (using Nextjs 13's fetch with {cache:'force-cache'}) from an api that returns a random joke. I noticed that fetch is being called twice during build. Here's my code: // page.js import...

Lets consider this example of fetching first 3 pages of pagination during build time: app/listing-params/[page]/page.jsx const getData = async (page) => new Promise((resolve) => { setTimeou...

Currently trying to refactor our project to use Server components (app directory), and the first challenge is how to implement infinite scroll pagination with new "app" directory. This is...

Leaflet is imported in a file that's imported into a client component, so why is the server running it and throwing this error? It actually does work after a retry and eventually renders site...

Im trying to understand React server components and how to render component state without the use of useState and useEffect. I have created a server component with an embedded client component and ...

So this is a fairly new topic, React Server Components has recently been released, comparing to SSR/Next.js, how does it affect SEO? Since the component is rendered in the server dynamically when i...