I have a basic Next.js application with the following route structure: /contentA/ - Static - Initial load: 103 kB /contentA/[paramA]/groups - SSG - Initial load: 120 kB /contentB/[paramA]/[paramB]/[paramC] - SSR (client component) - Initial load: 103 kB ...
Exploring the capabilities of React Server Components, specifically with Next.js. Encountered an issue when changing from _app.tsx to _app.server.tsx</code - the TailwindCSS styles are not being applied (although the html renders correctly).</p> & ...
When trying to fetch data from the next API route, I encountered an issue where the useEffect method did not trigger on page reload. Additionally, I was unable to make this component async as Next.js does not allow async functions in client components. pa ...
Currently, I am working on implementing a tailwinds css template sidebar that updates the main div with components based on the active sidebar tab. To achieve this functionality, I need to utilize state to determine which sidebar tab is currently active. I ...
I am currently working with Next.js 14 and utilizing the app router for my project. Within my application, I have two server components: A List page located at /products, which displays multiple products A Product Details page located at /products/{id}. ...
Within my Nextjs application, I have implemented suspense on a specific page route to showcase a loading skeleton until the content is fully loaded. The URL structure follows something like '/organization/:orgId/activity'. Utilizing server components, I ...
Utilizing Sequelize ORM in a Next.js App router, I am retrieving data from a MySQL database. The method "getTransactions" returns the following: const { rows, count } = await Transaction.findAndCountAll({ limit, offset, where: whereClause, ...
How can I make an action take effect on page-load for the app router equivalent of statically generated pages from static paths in NextJS? Everything is working fine with my page generation: // app/layout.js import Providers from '@/app/Providers'; expor ...
I am currently utilizing the new app directory feature in Next.js 13. Within my project, I have a page component located at app/page.tsx. This component contains the following code snippet: "use client"; import { useState } from "react" ...
My code involves retrieving cookies from the user on the front end, verifying it against a backend token stored in a database, and controlling access to certain pages based on this validation. If the "token" cookie is present, the user is allowed access, o ...
Hello fellow developers! I recently completed the tutorial on Next.js and I have a query regarding APIs. After reading through this documentation page, it seems like API routes should be located in a subfolder or route corresponding to the page they will ...
Currently, I am utilizing an API call within the Metadata to retrieve information based on the inputted URL. The next/headers are used to access the URL. export async function generateMetadata( { params, searchParams }: MetadataProps, parent: Resolving ...
In my Next.js app directory, I am facing the need to send emails using Nodemailer, which requires server-side components due to restrictions on client-side sending. Additionally, I am utilizing TypeScript in this project and encountering challenges when tr ...
I've been diving into the world of Next.js 13 app directory and React 18's Server Components. In line with the documentation, I decided to include an async fetch() call within a Server Component while also marking the component as async. However ...
SOLVED At the beginning of my project, I was considering using internationalization for translating the pages. In the next.config.js file, there are some configurations for internationalization like the one below that caused issues: //next.config.js const ...
When utilizing the Server Component feature in Next.js, it is necessary to declare either 'use client' or 'use server' at the start of the jsx file. The default processing method is 'use server', so including it explicitly may ...
Within my server component, I have a component called InitView; const InitView = () => { useEffect(() => { }); return ( <> <Hero/> <span className="text-xl font-normal text-gray-100"> ...
Introduction Currently, I am exploring server and client components in Next.js 13 and looking to incorporate them into my project. One of the key features is a container component that utilizes react-intersection-observer to track which section is visible ...
Using Next.JS 13.4.19 and the new app folder to enable React Server Components is posing a challenge when attempting to incorporate client sub-components (such as <ClientComponent.SubComponent \>) within a server component. The file ClientTest. ...
Utilizing Nextjs 13's fetch function with {cache:'force-cache'}, I am fetching from an API that delivers a random joke. During the build process, I observed that fetch is executed twice. Below is the code snippet: // page.js import {RefreshButton} from '. ...
While configuring my Nextjs 13 App Router with MUI 5, I carefully followed the instructions provided at this link: https://mui.com/material-ui/guides/next-js-app-router/. My code closely resembles the sample code found here: https://github.com/mui/material ...
Currently, I am diving into the official documentation for Next.js and utilizing the App router. On the data fetching patterns page, it explicitly states: Whenever possible, we recommend fetching data on the server To adhere to this recommendation, I cr ...
Screenshot of the errorI am encountering a strange error only in the production environment. The lack of additional information leads me to believe it may be due to security measures put in place for production. Unfortunately, I have been unable to repli ...
Currently, I am utilizing Codehike Bright alongside NextJS 13.2 in my app directory, which involves React Server Components integration. In addition to this setup, I am also incorporating MDX. Within the TSX file named page.tsx, the MDX content is loaded ...
As I explore how to implement authentication using Firebase in my Next.js app, one thing that stands out is the need to initialize Firebase with our configuration details (apiKey, etc.). The concern I have is when using any Firebase function from a client ...
I'm facing an issue with retrieving the pathname of a server component located in the app directory. Despite attempting to obtain it through window.location, I haven't been successful. Is there an alternative method I can use to achieve this? ...
After updating to nextjs v13, I have successfully moved my personal page to the app directory. I experimented with adding loaders for RSCs by first using the fallback prop of the Suspense component and also including a loading component within each route ...
Is there a way to utilize my MUI (material ui) theme definition in a server component without using the 'use client' directive? Typically, I rely on the handy useTheme hook. However, this approach requires me to convert it into a client component with the ...
How can I effectively implement the useEffect functionality in Next.JS server components? I attempted to use useEffect on the server side but it was unsuccessful. Are there alternative hooks that can be utilized on the server side? If not, what is the bes ...
My Nextjs 13 frontend (app router) interacts with a Laravel-powered backend through an api. To handle authentication in the api, I am utilizing Laravel Sanctum as suggested by Laravel for SPAs. This involves setting two cookies (a session and a CSRF token) ...