Ways to retrieve parameters in getStaticPaths function?

I'm currently working on a Next.js app with Contentful as the CMS. The file structure relevant to my question is:

pages
-[category]
  -[slug].js

My goal is to access the category value when a user visits category/slug. Currently, I have the category hardcoded. Is there a way for me to dynamically access the category using params?

const category = 'mains';

export async function getStaticPaths() {
    let data = await client.getEntries({ content_type: category });
    return {
        paths: data.items.map((path) => ({
            params: { category: category, slug: path.fields.slug }
        })),
        fallback: false
    };
}

Answer №1

getStaticPaths function is utilized for pre-rendering paths before deploying the application. When rendering on-demand, it is necessary to utilize getStaticProps. In this scenario, you will have access to a context.params object containing all parameters (ctx.params.category, ctx.params.slug)

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

Unable to transmit information using Postman for registration API

I have been struggling to send data via a POST request to the register API, but for some reason, the data is not being transmitted. I have tried adjusting the settings on Postman, tinkering with validation rules, and various other troubleshooting steps, ye ...

Using Jquery to set values for css properties

I've recently started using jquery and I have a task related to a drop-down menu that I'm struggling with: if (scrnwidth <= 761) { if (display was block) { //Defaultly testi has display:none property. testi = m ...

Creating dynamic bar chart visuals using Morris.js with JSON responses

Utilizing the morris.js library, I am extracting and plotting bar charts from data retrieved through a webservice. Issue: The format of my webservice URL is as follows: http://localhost:9999/hellowebservice/search?select=* I populate the select query ...

Is there a way to showcase a Bootstrap popover using HTML content sourced from a GridView?

I've spent the last couple of hours experimenting with this, trying different things. I can successfully display a popover with basic title and content, but I'm struggling to make it work with HTML and Eval() as the content. Here's my curren ...

How to display a modal within a router-link in Vue 3?

Below are buttons with router-links. However, I only want the calculator button to open a modal. When I execute the code provided, all buttons trigger the modal instead of just the calculator button. Output: Router-link Code: <div class="contai ...

.toggleClass malfunctioning inexplicably

I've been struggling to make a div box expand when clicked and revert to its original size when clicked again. It seems like a simple task, but no matter what I try, I can't seem to get it right. I'm not sure where I'm going wrong, as t ...

The persistent state is not being saved correctly by Redux-Persist and is instead returning the initial

I have included redux-persist in my project, but for some reason it is not persisting the state as expected. Instead, I keep receiving the initial state whenever I reload the page. Below is the snippet of my root-reducer: import { combineReducers } from & ...

Error caught: Unexpected token ''<' encountered while utilizing Next Middleware

My middleware setup is quite simple. It checks if the user is logged in using a boolean from the Zustand store, and then redirects the user to the login page accordingly. I followed the guidelines provided in the official documentation. import { NextRes ...

Is there a more efficient way to optimize my coding for this Cellular Automata project?

As a beginner in programming, I wanted to delve into the world of cellular automata and decided to create my own using JavaScript. The project involves a simple binary (black and white) 2D CA where each cell updates its color based on the colors of its 8 ...

Excess space at the bottom of the Heatmap chart in Highcharts

I am facing an issue with a heatmap having extra space at the bottom that I cannot seem to remove. Despite trying various solutions from different Stack Overflow threads, such as adjusting chart.marginBottom, chart.spacingBottom, x and yAxis margins, and d ...

Stop the submission process by deactivating the button until a selection is made

Is there a way to prevent the submit button from being clicked until the user has selected or typed at least one value? <form name="forma" method="POST" action="used-results.php" id="apliforma"> many textboxes and dropdown menus <a oncli ...

What role does express play in the functioning of socket.io?

Forgive my lack of experience, but I am curious about the role of express in socket.io. Why is it necessary to require express when developing a chat application? Can we simply utilize the socket.io API for this purpose? Appreciate your help in advance. ...

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript

Encountering issue with accessing ids of dynamically generated HTML elements using javascript In my current project, I am attempting to dynamically alter the ids of div elements and remove buttons that are appended to the parent div. The desired functiona ...

The spinner persists even after the fetch api call

The issue I'm facing with my song lyrics app is that the spinner does not disappear after fetching data from the API. It seems like JavaScript is unable to detect the presence of the spinner even though it exists when the remove function is called. I ...

Nested views within nested views in UI Router

Exploring the capabilities of angular-ui and specifically experimenting with the ui-router module to create nested views. I'm running into an issue where a partial isn't rendering within another partial: The structure of nesting looks like this: ...

Is there a way to efficiently line up and run several promises simultaneously while using just one callback function?

I am currently utilizing the http request library called got. This package makes handling asynchronous http connections fast and easy. However, I have encountered a challenge with got being a promisified package, which presents certain difficulties for me ...

The method window.scrollTo() may encounter issues when used with overflow and a height set to 100vh

Suppose I have an HTML structure like this and I need to create a button for scrolling using scrollTo. However, I've come across the information that scrollTo doesn't work well with height: 100vh and overflow: auto. What would be the best way to ...

Navigation from Next.js to a Django page results in the user being logged out of

I'm currently developing a project that involves combining Next.js with Django (using the django-nextjs package) for managing authentication through session-based authentication. Here's how the issue unfolds: Starting from the homepage (a Next.j ...

What is the ideal framerate for smooth animation?

I'm looking to add a snow animation using JavaScript. I currently have it running at 200ms which is decent but not smooth enough. Would changing the interval to 20ms make it more fluid, or would it be inefficient and strain the CPU? window.setInterva ...

Having trouble viewing the CSS menu on Internet Explorer 8? Could it be a potential JavaScript issue causing the problem?

Receiving complaints about the menu bar dysfunction in Internet Explorer 8 has left me bewildered. Despite working perfectly on all other browsers and earlier versions of IE, I cannot figure out what's wrong with the code. You can view the website at ...