Questions tagged [nextjs-dynamic-routing]
No information has been provided for this tag at the moment!
Looking to pass props to the Layout component for dynamic routes in my project structure: /app -/(site) --/layout.tsx --/page.tsx --/[slug]/page.tsx --/[slug]/layout.tsx In the site layout: export default async function IndexRoute({ children }: { chil ...
Currently, I am using the next-usequerystate library with Next Js 13. However, I have encountered an issue where the state on the URL is lost when I refresh the page. The initial URL looks like this: localhost:3000/?page=1&genres=tree But upon refres ...
Currently, I am working on a mdx blog within the NextJS framework. To achieve this, I have implemented a function called getPostDataByCategory(category) in posts.js located under lib. This function is responsible for filtering posts based on categories. ge ...
Can Nextjs 13 App Router be used to efficiently pass previewData from MainComponent.jsx to Preview.jsx as a State, without involving query parameters or props? I want to transfer the data as state from MainComponent.jsx, then navigate to the Result.jsx com ...
Struggling to create a static path in NextJs v14. The dynamic route keeps giving a 404 error, while a similar non-dynamic route is working fine. The dynamic route is accessed via localhost:3000/product/categoryProduct/a Code path: app/(common)/product/ca ...
Hey everyone, I could really use some help here. I've been working on integrating Firebase into my Next.js app for the API. Everything works well when I build and run locally, but once I deploy to Vercel for production, I encounter a 500 - Internal Server ...
Imagine you have a server-side component located in the app directory called page.js, which represents a person: export default async function Person({ params }) { const person = await getPerson(params.id); return ( <h1> {person. ...
My challenge lies in sending data via router.push to a page with dynamic room id (src/pages/editor/[roomid].tsx) in Next.js. I want the URL to stay clean so users can easily edit their username in the URL if needed. When initially loaded, router.query suc ...
I've encountered a problem with dynamic routes. Here is the file structure I'm working with: app members [memberID] page.tsx When I run: % npm run dev And visit this URL in my browser: http://localhost:3000/members/AA66 ...
After integrating next-i18next into my Next.js project using the official guide, everything appeared to be functioning correctly. However, I encountered a 404 error when switching from the default language (Italian) to English and navigating to the detail ...
Recently, I encountered a situation where I needed the project ID to be dynamic. For example, when accessing /management/123, it should take me to the dashboard of that specific project showing stats. However, I also need to display the feature and issues ...
I have developed search functionality that navigates to "/search/xxxx", but it is located in the header. Every time I perform a search, the route gets repeated and becomes "/search/search/xxx". Could you suggest any way other than usin ...
When I try to pass data from one component to another using query, I encounter an issue where the data is undefined or { params: {}, searchParams: {} }. However, in the ProductData component, the data is received correctly. Can you help me identify what I ...
Query 1: I am in the process of updating our custom application from version 11.1.4 to 12.2.0 of Next.js, but encountering an issue as follows: Error - ./node_modules/@internationalized/date/dist/import.mjs:1:0 Module not found: Can't resolve '@swc/helpe ...
While using Next.js, I encountered an issue where opening a new page would maintain the scroll position from the previous page. For instance, if I had scrolled to the bottom of a product listing page and clicked on a specific product, the product details p ...
I am looking to establish a dynamic route hierarchy for my next.js project, where the primary directory is named countries and will contain multiple country subdirectories. www.mysite.com/countries www.mysite.com/countries/united-states www.mysite.com/coun ...
After attempting to retrieve the most recent liked items from a server component in next, I noticed that the data only displays when manually refreshing the page. Even when I navigate away and return, the data is not refetched automatically - however, usin ...
When attempting to import Router from next-router, I encountered the following error message: Module not found: Can't resolve 'next-router' I have the latest version of Next.js installed (13.0.6) package.json: { "name": "frontend", ...
Previously, with the legacy pages router, I was able to use await on router.push. This allowed me to keep a button disabled while waiting for navigation to another page: async function onSubmit(input: CreatePostFormData) { try { awai ...
Exploring nested children components in Next.js as a React JS developer. In React, I used the outlet to nest child components, but I am unsure how to achieve this in Next.js. Folder Structure: https://example.com/folder-structure.png Index.js: https:// ...
Has anyone successfully integrated Google Analytics 4 (gtag) in a NextJS 13 app directory? In my previous Vanilla JS / EJS applications, I simply added the following code to each page. My understanding is that this code sends a page_view event to Google An ...
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 ...
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 ...
One aspect I'm curious about is the Link component from 'next-Link'. If I need to pass sensitive data, such as a category_id, how can I securely transmit it for use in the getServerSideProps() function without relying on query strings? ...
In order to ensure that I have access to the same data in both the Page and the generateMetadata function, I need to cache my API function on this page. Since I am using Axios instead of fetch, automatic deduplication does not occur. As a result, I must w ...