Encountering Next.JS Router Issue: Unable to Access Properties of Null (specifically 'useContext')

As a beginner in Next.js and React, I'm facing an issue with redirecting users from the "Projects" page to the Product Page Details. Here's the code snippet I am using:

const openProjectDetails = () => {
  Router.push('/api/' + props.projetos.key);
}

This is the code found in the "/api/[key].js" file:

import { useRouter } from 'next/router';

const ProjectDetails = () => {
   const router = useRouter();
   const { key } = router.query;
   
   return (
      <div>
         {/* Display the project details */}
      </div>
   );
};

export default ProjectDetails;

I seem to be missing something, as this specific page is giving me an error related to const router = useRouter();

Apologies if this seems basic or if I'm new to this technology.

Error: Cannot read properties of null (reading 'useContext')

I intend to pass the key value to retrieve all project fields from the database, but due to this error, it doesn't work as expected.

Answer №1

It's important to note that the useRouter hook cannot be used in an API page, as API pages are server-side and the useRouter hook can only be used on client-side pages.

If you're working with API pages, they should typically return JSON data rather than HTML elements. If you need to display HTML content, consider using /projects/[key].js instead of an API route.

However, if you do want to access the value of [key], you don't actually need the useRouter hook. Your ProjectDetails function can simply extract the key from the URL params like so:

const ProjectDetails = ({params}) => {
   
   const key = params.id
   // The key variable now holds the value of [key] from the URL
   
   return (
      <div>
         {/* Display the project details */}
      </div>
   );
};

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

Refresh the information on the page by loading data from the log file using AJAX

I am currently running a shell script in the background and directing the output to a log file using PHP. I'd like to showcase the content of this log file on the webpage, which I've managed to achieve with the following code snippet. <?php ...

Issue with Vue class binding failing to update when state is modified

I'm attempting to utilize Vue class binding depending on the index within the v-for loop. While I can see that the state in Vue dev tools is changing correctly, the class name itself isn't being updated. <div class="group" v-for= ...

"What is the best location to save the prisma seed.ts file in a Next.js 13 application with appDir configuration in order to inject seed data into

Trying to add seed data to a Supabase database from an app using Next.js 13 with appDir has posed some challenges. Some resources suggest placing the seed file in pages/api so that it is applied when the next API server runs. However, in a project built wi ...

Stop the setTimeout function after redirecting in the controller

I am experiencing an issue with my AJAX call as it keeps triggering my controller repeatedly. AJAX function <script type="text/javascript> var stopTime =0; var scoreCheck = function () { $.ajax({ url: "<?php echo 'http:// ...

Can you explain the error message "a.split is not a function" in an Angular context?

My Angular application is encountering an error upon page load. The error message displayed is as follows: angular-amin.js:122 TypeError: a.split is not a function at r (angular-amin.js:186) at m.$digest (angular-amin.js:145) at m.$apply (angular-ami ...

Syntax Error in Node.js for MongoDB: Unexpected token or invalid symbol

I'm having trouble figuring out what's going on. Node v16.4.2, NPM v7.18.1 const mongoose = require("mongoose"); // const dotenv = require('dotenv') require('dotenv').config({path:'variables.env'}); mongoo ...

RaphaelJS: Ensuring Consistent Size of SVG Path Shapes

I am currently constructing a website that features an SVG map of the United States using the user-friendly usmap jQuery plugin powered by Raphael. An event is triggered when an individual state on the map is clicked. However, when rendering a single stat ...

Inject the error into the Router in Express.js, utilizing Node.js

Is it possible to pass an error into an express.js Router? The express.js documentation does not provide a clear answer regarding passing errors in relation to middleware, routers, and error handling (I am unable to include links as I lack reputation). I ...

Tips for handling the response after a view has been submitted on Slack using Bolt.js

Hey there! I added a simple shortcut to retrieve data from an input, but I'm facing an issue after submitting the view. The response payload is not received and the view doesn't update to give feedback to the user. Check out my code below: const ...

Why won't my controller function fire with ng-click in AngularJS?

I'm having trouble getting a function to execute when my button is clicked. Despite the fact that this code appears correct, the function defined in my controller isn't being triggered. The code compiles without errors as shown in the console. A ...

List of Map Pins on Google Maps

I am looking to integrate PHP and Javascript to display multiple markers (at least 50) on a Google map. After reviewing the documentation at: https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal I noticed on line 15 it m ...

Working with masonry does not involve filling tiny crevices

Check out the DEMO here Experience the FULL Screen DEMO An issue with Masonry: it's not filling small gaps even when there is available space. For example, in a main container with a width of 896px; next to the first container with an orange backgr ...

What is the best way to delete comments from the config.js file?

I'm looking for a way to remove comments from my config.js file, which is acting as a JSON file in my project. The config file has both single line comments like this: //comment goes here and multi-line comments like this: /* comments goes here */ ...

Difficulty transferring information between two components by using services

I am trying to pass the values of an array from the Search component to the History component in order to display the search history. My current code structure looks like this: search-page.component.ts export class SearchPageComponent implements OnInit ...

Tips on expanding the dimensions and incorporating more members in a radar graph's Chartjs tag

I need to make some adjustments to the font size and color in a radar chart. Specifically, I want to change the name on the side of each data point. I have already tried adjusting the legend labels using the following code: options={{ ...

Implement React-intl into the designated placeholder within the object

Currently facing an issue with the const inputProps in my code. I attempted to integrate React-intl into the react-autosuggest placeholder input, but now the placeholder text displays as: [Object object]. The getStepContent function is defined as follow ...

Unable to redirect Firebase Hosting root to a Cloud Function successfully

Currently I am utilizing Firebase Hosting along with a Firebase.json file that is configured to direct all traffic towards a cloud function (prerender) responsible for populating meta and og tags for SEO purposes. { "hosting": { "public": "dist/pr ...

Retrieve binary data of an image from an API and render it on an HTML page

I have been working on storing images in a MongoDB database and trying to display the response I receive from an Express API as an image on the client side. The image source URL looks like this: src="/image/data/5a44dde172aa021d107e7d33" When I try to wr ...

Caution: The presence of <li> within another <li> is not permitted in validateDOMNesting()

I am facing a challenging background error warning that I am struggling to solve. As a beginner, I understand the need to change li, but I'm not sure where to begin. Can someone please assist me with this error warning: next-dev.js?3515:20 Warning: va ...

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...