Questions tagged [app-router]
No helpful tips available for this tag at the moment.
Hey there! I'm currently grappling with a tricky issue that I've been trying to debug and resolve on my own using online resources. There are several reasons why this problem is especially challenging for me. The title hints at a minification e ...
As a newcomer to React JS and Next.js, I recently made the switch from using the Page Router API in Next.js to utilizing the new App Router introduced in Next.js 13. Previously, with the Page Router, creating a single GET request involved nesting your "JS ...
Recently, I made the switch from a page router to an app router for its advanced features. However, I'm facing a dilemma when it comes to implementing SSR and data fetching. The Issue: According to the documentation, instead of using getServerSideProps() ...
Encountering an error while attempting to create a basic route in app/dashboard/page.tsx. The error message suggests that the contents are not a valid react component, even though they conform to valid react component syntax. Unhandled Runtime Error Erro ...
I am facing a challenge with integrating Datadog into my NextJs 14 app that uses the app router. In previous versions, I successfully integrated Datadog into React and NextJs apps without the app router by placing initialization code in the top level compo ...
Within my file (handlers.ts), I have a function designed to post data to a dynamic API route while utilizing the app router. This function requires values and a URL for fetching. However, when I pass the URL as a prop like this: http://localhost:3000/unde ...
I'm struggling with transitioning from the Home page to the Detail page. I've successfully passed data to the URL from the Home screen, but I'm having trouble accessing it in the Detail screen. I'm working with NextJS ver 13, using Type ...
Our Openlitespeed web server is causing issues with the parameter being sent to construct the request object in NextJS, leading to an error. import { type NextRequest } from 'next/server'; export function GET( request : NextRequest, { pa ...
I've been developing a project with the nextjs app router, and I'm facing an issue where the dashboardlayout inside the dashboard folder is accessible only to logged-in users, but the Rootlayout navbar and footer still appear even after login. Ho ...
Hello, I have been attempting to set up Clerk on the latest version of Next using the app router. After carefully reading through the documentation, I found the setup process straightforward and decided to give it a try on a new project I've been working ...
I'm currently utilizing the app router and deploying on Vercel. Within the root of my project, I have a directory named blog where I store markdown files. When accessing them locally, I use: ./blog/a-blog-post.md. This method works well for both dynam ...
I'm currently working on developing an App using nextjs 13 and the new App router feature (https://nextjs.org/blog/next-13-4) : I've encountered a navigation issue despite following the documentation diligently. To illustrate, here's a basic component sn ...
After migrating all the routes on my project from pages router to app router, I no longer have a pages folder. However, the build output is still displaying the pages router's 404 route. View Build Output Route (pages) Size ...
Currently, I am working on a feature within a Next.js application where there is a modal accessible through a parallel route. This modal consists of tabs that can adjust the searchParams in the URL as users interact with them. The modal can be triggered by ...
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 ...
Utilizing a default layout in layout.jsx, I passed all my other pages as children through props. In the page router, we typically configure the router path to specify which layout to use. However, in this new system, I am facing challenges with coding it. ...
Utilizing the app router in Next.js v.14, I have organized my directories as follows: /app/api/github/webhook/[token]/route.ts I am trying to figure out how to extract the value of [token] within the POST request handler. Is there a specific method in the ...
I'm encountering a challenge where I am unable to properly receive Webhooks from SVIX in my Next.js 14 application. Currently, I am utilizing Ngrok to forward the requests to my Next.js app running on Local Host. However, every HTTP request results in a ' ...
async function handlePostRequest(req: Request) { try { const requestBody = await req.json() console.log(requestBody); return new Response("ok") } catch (error) { console.log(error); } } When attempting to send a payload usin ...
https://i.stack.imgur.com/EaYOG.png Here is the structure of my app router: The root layout must be shared with everyone. However, within the login component, there is another layout.jsx that should not share the root layout but override it and use the l ...
If you're working in the pages router, one approach is to use a getStaticProps function to pass props into your component. This function receives request and response objects as arguments, allowing you to access any relevant information from them. In ...
I am currently working on building APIs in a Next.js 13 application using route handlers. In order to authenticate users, some of these APIs require access to cookies and the ability to handle errors for unauthorized or expired logins. I would like to cons ...
I'm currently working on a Next.js 13.4.9 project and encountering an issue with redirecting logged in users within a client component using the useEffect hook. Despite trying a specific method, I keep getting an error in the browser (NEXT_REDIRECT). impor ...
My Next.js 14 website with multi-language support needs to generate a sitemap.xml that includes the following xhtml link tag: <xhtml:link rel="alternate" hreflang="YOUR_LOCALE" href="YOUR_LINK" /> I want it to display l ...
The issue arises when the create form's type (id) parameter is null, which does not align with prisma's (edit info). export function AboutForm({ id }: { id: number }) { const router = useRouter(); const [err, setErr] = useState(""); ...
I am currently working with Next.js 13 and the App Router. Within my client component, I have implemented media queries in JavaScript to customize sidebar display for small and large screens. "use client"; export default function Feed() { co ...
Currently using App router and in need to transfer parameters as an object without reliance on useParams & useSearchParams Suppose there is an object named person const person: Person = { name: "John Doe", age: 25, address: "123 M ...
Having a Next 13 app with the app router, I have a query about the optimal approach for fetching data: When it comes to retrieving data (such as fetching a list of posts), there are two options - either through the API client-side or directly in my react c ...
When attempting to retrieve data using fetch("/api/status"), the URL is only detected when utilizing the absolute path: fetch("http://localhost:3000/api/status"). This is happening without storing the path in a variable. ...
I am currently working on establishing a connection to Zoho Creator in order to retrieve some data. After successfully testing the request on and receiving the correct response, I encountered an issue while trying to implement it within a next.js applicat ...
I recently started moving my Next.js projects into a Turborepo monorepo setup. Within the Next.js projects, I'm utilizing the latest App Router and have server-side routes and components. These elements all compiled successfully outside of Turborepo, ...
I am facing an issue with my profile screen rendering based on cookies. The problem occurs when the cookie is not present or invalid, as it renders a login link. Even after the user logs in and returns to the profile page, the login link continues to appea ...
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 ...
How can I implement Redux toolkit in the NextJS 13 App router? I have included all my slices and code related to redux toolkit. I am encountering an error in the terminal, which indicates that there might be an issue with the code. In Nextjs 13, it seems ...
Seeking assistance with understanding the intricacies of the app router, particularly when dealing with deeply nested dynamic routes. Imagine running an ecommerce platform with multiple stores offering various shopping modes like pickup and delivery. How ...
Having trouble with my custom 404 error page (= not-found.tsx) files. I have two of them, one within app/(paths) and another within app/(paths)/(jobs)/jobs/(cats). The issue is that the first not-found file should render when a user visits url example myap ...
I've been attempting to integrate a HubSpot form into a Next.js component without success so far. I followed the guidelines mentioned here, but have yet to figure it out. Where exactly should I place the embed code? As a newcomer to the realms of React an ...
Having trouble with favicon display in Next.js 14.0.2. The issue cropped up after implementing internalization and reconfiguring my project structure. Here is a simplified view of my project structure: - app - [lang] - _components - _dictionaries ...
I am a beginner in Next.js and I am currently experimenting with the new app router feature by placing my pages under app/.../page.tsx The code snippet provided works when using the page router (pages/blah.tsx) but encounters issues when used in app/blah/ ...