Issue with incremental static generation in version 13 not functioning as expected

Is ISR working for anyone in the NextJS 13 Beta version?

I have set revalidate to 15 as follows.

export const revalidate = 15;

However, even after running `npm run build`, the page still remains a statically generated site (SSG).

The symbol is showing up as an empty white space.

What am I doing wrong? I expected the page to utilize ISR.

P.S: I also attempted using fetch api with { next: { revalidate: 15 } }, but the result was the same.

After running npm run build, this is the output in the terminal.

This page is not a dynamic route.

The file location is app/page.jsx so it should open at localhost:3000

import axios from "axios";
import Card from "@/components/Card";

export const revalidate = 15; // doesn't seem to be having any effect

const AllCards = async () => {
  const url = 'http://localhost:3001/cards';
  const fetchCards = await axios.get(url);
  const cards = fetchCards.data.data;
  return (
    <main>
      <div className='text-3xl font-bold underline text-center mb-4 mt-4'>
        All Cards
      </div>
      <div className='flex flex-wrap justify-center gap-2'>
        {cards.map(c => <Card vanity={c.vanity} art={c.art} id={c.id} />)}
      </div>
    </main>
  );
}

export default AllCards;

Answer №1

In my opinion, it would be beneficial to include:

export const generateStaticParams = []

Personally, I always provide an empty array even when there are no parameters specified. –

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

NodeJS executor fails to recognize Typescript's CommonJS Internal Modules

In the process of developing my NodeJS application, I am structuring it by creating internal modules to effectively manage my code logic. This allows me to reference these modules without specifying the full path every time. internal-module.ts export cla ...

What could be causing the TypeError message stating "Unable to access property 'useState' of null"?

Whenever I try to use the useState hook in my Next.js project, I encounter an error message that says: TypeError: Cannot read property 'useState' of null Is there a way to resolve this issue? import { useState } from "react"; import { g ...

Enhanced functionality in MUI TablePagination now allows users to easily select their desired page

I've implemented MUI TablePagination to enable pagination in my table. The code is performing well, offering most of the features I need: Users can choose between displaying 5, 10, or 20 entries per page using a dropdown. The number of pages displaye ...

The REACT- Popover feature seems to be having trouble showing the data from my json file

Within the menu/ section, the names of my invited guests are not visible; only the InfoIcon is displayed in the cell. My goal is to implement a Popover feature that will show all the information about the invited guests (including their names and locations ...

What is the purpose of using a single pipe character within a Vue.js template handlebar expression?

Here is a sample code snippet: <div> {{ name | capitalize }} </div> I have searched through the documentation for vuejs and handlebars, but couldn't find any relevant information. ...

The functionality of the remove button in the jQuery Dropzone seems to be malfunction

I devised a user-friendly drag and drop feature for uploading images using the dropzone plugin. Here is the code snippet that I implemented: <script src="<?php echo base_url() ?>acc/assets/dropzone/dropzone.js"></script> <form actio ...

Next.js throws a ReferenceError when the self variable is not defined while creating a child process using a custom webpack configuration

Trying to create a child process in Next.js for a time-consuming operation. Here is the webpack configuration (next.config.js): const { merge } = require('webpack-merge'); module.exports = { webpack: (config, { buildId, dev, isServer, defaultL ...

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

I am encountering an issue with a textarea count code. It functions perfectly on its own but when I integrate it as shown below, it stops working without throwing any errors. I have been trying to resolve this for more than 3 days now. Any assistance would ...

Working with AngularJS's $q promise and socket.io

I am interested in creating an angularJS promise that can work seamlessly with socket.io. Currently, I have a callback function set up to handle the response like this: function request(event, data, callback) { socket.emit(event, data); socket.on( ...

Having trouble fetching "pictures" due to net::ERR_CONNECTION_REFUSED error on Gitpod

When working on Gitpod, I encountered an issue with my NextJS frontend trying to retrieve a list of objects containing "product names", "prices", and "images" from my Django Rest API backend. Despite successfully retrieving objects with "product names" and ...

Pass the returned variable value from a request.get call to another function in NodeJS Express

I have a situation where I am calling a function that makes a request to get some JSON data and then fills in the variables from my router.get method. The issue I am facing is that the variables are getting their value inside the callFunc function, but wh ...

Unable to retrieve the field value from the Json Object

I have a JSON object that I need to parse and display in a data table, but I'm having trouble reading the contents of the object. Here is my JavaScript function: finalGrid: function(data){ console.log("Final Grid"); var strJson = JSON.strin ...

I need to fetch data from mongoDB by allowing the user to input a name into a search field, and then retrieve all documents that correspond to that search term

I am currently able to query the database by finding a specific key:value pair in the documents. However, I would like to enhance this functionality by allowing users to input their own search criteria as an argument in the function. Right now, I have hard ...

Display a specific division depending on the outcome of an Ajax request within a PHP form

My PHP form has a layout similar to this: <form> <div id="inid"> National ID: <input type="text" id="individual_nid" oninput="getIndividualName(this.value)" /> </div> <hr /> name: <div id="individua ...

Design a progress bar that advances in increments of at least two and up to a maximum of

My task involves managing a simple list. const [progressBar, setProgressBar] = useState([ { isActive: false, name: "step1" }, { isActive: false, name: "step2" }, { isActive: false, name: "step3" }, { isActive ...

Exploring AngularJS ng-repeat features for custom attribute settings

I'm currently facing a challenge in removing multiple repetitive divs by utilizing ng-repeat. <!-- I have 21 of these --> <div class="table-row"> <span class="glyphicon glyphicon-wrench"></span> <label>Chlo ...

Having trouble getting webpack and babel to start using npm

Greetings, wonderful people of the internet! I am a newcomer to the enchanting world of programming and I am facing a perplexing issue. Although Webpack is trying to guide me towards the solution, I seem to be struggling with fixing it on my own. const pa ...

``Please note that the Sinon spy.called method is currently not

Context In my setup, a small server receives data from a machine. Each time a message is received, a function in a dispatcher object is called, which simply logs everything it receives to the console. Issue While I can see the logs in the console, Sinon ...

Stack screen not visible on React Native navigation

I'm currently utilizing the React Native Navigation library for routing. However, I've encountered an issue with the code below that doesn't seem to be functioning as expected. My objective is to set up two screens - one for login and the o ...

Resolve CORS issue by implementing WPGraphQL plugin as the back end and integrating NextJS as the front end

Recently, I encountered a challenging error after transferring a website from Google Cloud. Initially running on Nginx, the site is now hosted on an Apache server. The website comprises two parts: front-end (hosted on Vercel NextJS) and a backend WordPres ...