What is the process for exporting dynamic paths with the NextJS app using static methods

My webpage is located within the directory src/app/c/patient/[id]/page.tsx. Everything is functioning correctly when deployed, but I'm trying to export it to a js bundle for use with the Capacitor Android/iOS app. However, I encountered the following error:

Error: Page "/c/patient/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

To address this, I added the following code:

export async function generateStaticParams(): Promise<any> {
    return new Promise(resolve => {
        resolve([]);
    });
}

Despite this addition, the error persisted. Here is the full file for reference:


// ----------------------------------------------------------------------

export const metadata = {
    title: 'Patient',
};

type Props = {
    params: {
        id: string;
    };
};

export async function generateStaticParams(): Promise<any> {
    return new Promise(resolve => {
        resolve([]);
    });
}

export default function PatientPage({ params }: Props) {
    const { id } = params;


    return <PatientProfileView patientUserId={id as string}/>;
}

I'm puzzled as to why the error persists even though the required function is in place. Additionally, I'm uncertain if the dynamic routes will still function as intended once the static export is successful (specifically, will const { id } = params extract the /[id] portion of the URL in a static export?

Answer №1

If you encounter an issue while running next dev, your code may work fine. However, to ensure that it also works with static builds, you need to adjust your resolve([]) to resolve([{ id: 'whatever }]).

Make sure that there is at least one object in the returned array, and ensure that each object contains all the necessary properties expected by the component.

(The error message from the next CLI can be misleading, making it seem like you forgot to export the method entirely.)

It's worth noting that because the function is already labeled as async, you don't need to return a promise. Instead, you can return the array directly like this:

export async function generateStaticParams(): Promise<any> {
    return [{ id: 'whatever' }];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could someone explain why the window.onload function is not functioning as expected on my other Vue page?

I am facing an issue with my two pages or "views" that have identical JS code. Both pages have a window.onload function where I perform some actions: console.log("loading") window.onload = function() { console.log("loaded") // do stuff } The problem is t ...

What steps can be taken to avoid the appearance of the JavaScript prompt "Leaving site"?

Hi there, I'm currently trying to find a way to remove the Javascript prompt/confirm message that asks "Do you want to leave this site?" like shown in this link: The issue I am facing is that when a modal opens and the user clicks on "YES", it redire ...

Question: How come I am receiving the error message "TypeError: Cannot read property 'toLowerCase' of undefined" in React JS?

Hi there, I'm new to this and trying to create a search filter. However, I keep encountering an error that says: Error: Cannot read property 'toLowerCase' of undefined It seems like the issue is related to the data type used with toLowerCa ...

Activate event listener exclusively on the homepage

In the script below import { useEffect } from 'react'; import Link from 'next/link' import { useRouter } from 'next/router' import styles from './header.module.scss' export default function Header(): JSX.Element { ...

Creating routes with dynamic components or importing dynamic components in Angular 2 is a versatile and powerful feature

Is there a way to dynamically create routes or import components based on data? For instance, suppose I have a JSON file with objects containing RouteNames, paths, and ComponentNames. How can I dynamically generate route definitions from this data? The ch ...

Navigating through an array in Pug

I'm currently extracting data from an external API in JSON format and sending it to my view. The main issue I'm facing is that one of the properties within the Object consists of an Array of Objects. Using the Pug Documentation for iteration, I&a ...

Retrieve all the characteristics accessible of a particular course

I am facing a situation where I have the following class structure: class A { id: number propertyA: string constructor(id: number) { this.id = id } } let a = new A(3) console.log(SomeFunction(a)) // expected output = ['id', ' ...

Is it possible to identify images within a message sent by users to the server and provide a response accordingly

Apologies for my not-so-great English I am currently learning JavaScript and I am trying to detect an image in a message sent by users from the server, and reply with that image embedded in a bot message. However, message.content is not working for this p ...

Receiving Server Emissions in Vue/Vuex with Websockets

In my Vue component, I was using socket.io-client for WebSocket communication. Now that I've added Vuex to the project, I declared a Websocket like this: Vue.use(new VueSocketIO({ debug: true, connection: 'http://192.168.0.38:5000', })) ...

What is the best way to refactor the code below?

My goal is to construct a JSON structure using data retrieved from an API call. Utilizing the code below, I am able to generate the structure as desired. Despite this success, I am now seeking advice on how to refactor the code in order to eliminate nested ...

Obtaining IP Address with Jquery or Phonegap: A Guide for Cross Platform Development

Is there a way to retrieve the IP address using Jquery or Phonegap? I am currently working on an application that is compatible with Android, iPhone, and Windows platforms. I'm in need of a solution to locate the IP address of a request. ...

Activate a button with jQuery when a key is pressed

Currently, I have two buttons set up with jQuery: $('#prev').click(function() { // code for previous button }); $('#next').click(function() { // code for next button }); My goal now is to implement a .keypress() handler on the ...

Transforming data from an HTML table into a MySQL database

Is there a way to transfer data from an HTML table created with JavaScript to a SQL database? I have been experimenting with the addRow(tableID) function but it doesn't seem to work. Any suggestions on how to solve this issue? Below is the code snipp ...

Tips for ensuring the drop down button remains selected

My goal is to keep the sorting drop-down button selected after clicking on it, instead of resetting back to "All". Below are my HTML, CSS, and jQuery code. You can view the functionality on my website here: jQuery/Javascript: $(document).ready(function($ ...

Tips for parsing a JSON file within my node.js application?

I am working on a node.js service that involves validating JSON data against a schema defined in jsonSchema. Below is the code snippet for my service: app.post('/*', function (req, res) { var isvalid = require('isvalid'); ...

Activate the submission button only when all the necessary fields have been completed

I am currently working on a form that consists of 3 fields: email_from, email_subject, and an editor. The editor is built using draftjs. I am facing an issue with enabling the submit button only when all the fields are filled without any errors. Below is ...

Updates made in NextJS are not reflecting in Docker container

I am facing difficulties in seeing the changes I made to my NextJS app within my Docker container. I'm unsure whether this is a caching problem on the NextJS side or within Docker. Since I am new to Docker and NextJS, there might be something basic th ...

Place the cookie in React.js before the initial rendering

As a newcomer to ReactJs, I find myself facing a challenge with my application that relies on cookies to determine the language on the Server Side. The issue arises during the initial render when the cookie is not yet set, causing the application to defaul ...

The issue of WithRouter Replace Component not functioning in React-Router-V6 has been encountered

As I upgrade react router to react router v6, I have encountered a problem with the withRouter method which is no longer supported. To address this issue, I have created a wrapper as a substitute. export const withRouter = Component => { const Wrappe ...

Picture is not showing up on my MVC software

Within a table containing multiple other tds, I am having an image tag. <table class="MyClass"> <tr> <td> @Html.LabelFor(m => m.ShopName) </td> <td> @Html.TextBoxFor(mode ...