What is the best way to establish a page-specific API endpoint in Next.js?

How can I specify the API pathname for different pages in my project?

This is the folder structure I am working with:

src                                  
 ├── component        
 │     ├── common      
 │     └── layout            
 │            
 │                        
 │              
 ├── pages              
 │    ├── todo
 │    │    ├── index.js
 │    │    ├── list
 │    │          ├── index.js
 │    │
 │    ├── counter
 │
 ├── api  
 │     ├── user          
 │     ├── list           
 │

I would like to set up API calls like this: "localhost:3000/todo/api/..." or "localhost:3000/counter/api/..." instead of "localhost:3000/api/todo"

If you have any suggestions or guidance on how to achieve this, I would greatly appreciate it!

javascriptnext.js

Answer №1

Unfortunately, this functionality is not available at the moment. The api directory plays a crucial role in aiding nextjs in handling queries and distinguishing between the backend and frontend.

One way to achieve this is by organizing separate pages within your api directory (api/todo and api/counter).

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

What steps should I take to include a Follow - Unfollow Button on my Website?

I need to add a button on my website that allows users to either follow or unfollow a specific game. Here is the table for the follow buttons: Follow Button Table When a user clicks on the button related to the game ID, it should update the game_follow d ...

javascriptphpjqueryhtmlmysql

Exploring Data in a Tree View Format on a PHP Website

Looking for advice on displaying categories and corresponding subcategories on the left side of my website (built using Php and Javascript). I would like the tree to be movable, similar to the functionality featured on this link: Any suggestions on how I ...

phpjavascripthtmlajax

What could be causing my Angular JS application to malfunction?

Presenting myFirstAngularApp.html <html ng-app="store"><!-- The "ng-app" attribute initializes an Angular app. Everything inside this tag is considered part of the Angular app due to ng-app --> <head> <link rel="stylesheet" type= ...

javascriptangularjshtmldebugging

A guide to implementing react-hook-form in conjunction with form actions

Having trouble with this code as it's not performing validation upon submission? The login process is coded here using Zod for validation and React Hook Form for managing the form. However, the validation seems to be skipping, leading to a direct call ...

reactjsformsnext.jsnext.js13

transition effect of appearing and disappearing div

Having trouble creating a fade out followed by a fade in effect on a div element. The fade out happens too quickly and the fade in interrupts it abruptly. Here is the JavaScript code: $('#fillBg').stop(true,false).fadeTo(3000, 0); $("#fillBg"). ...

javascriptjqueryhtmlcss

Striving to design an event planner with the datepicker feature in javascript

Currently, I am integrating a javascript datepicker into my project to facilitate displaying a calendar and selecting a date for adding/viewing/editing events on that specific date. On my view, the datepicker calender is displayed within a div element. & ...

javascriptjqueryasp.net-mvccalendardatepicker

The behavior of Ajax is resembling that of a GET method, even though its intended method

Greetings, I am currently facing an issue while coding in Javascript and PHP without using jQuery for Ajax. My aim is to upload a file over Ajax and process it in PHP. Here is the code snippet: index.html <html> <head> <title>PHP AJAX ...

javascriptphpajaxpostget

Mastering the art of crafting and managing NodeJS promises with finesse

Currently, I am utilizing ExpressJS for handling APIs and heavily rely on promises for managing asynchronous requests such as external API calls and database queries. While this approach works well in most cases, it tends to clutter the code with numerous ...

javascriptnode.jsexpresspromise

Ways to alter the default background color in material-ui

I am currently working on creating a dashboard for my company and I am looking to modify the default styles of some material components. Specifically, I want to change the background color of the Paper component without having to add my style to each ind ...

javascriptreactjsmaterial-ui

Using jQuery to toggle visibility based on data equivalence

I created a code snippet in which I am implementing jQuery show/hide functionality when the data attribute matches. Here is the HTML structure: <div class="container"> <div class="item" data-item="1">1 <div class="inside" data-c ...

javascriptjquery

Implement functionality in JS to track the number of clicks on an element

I am dealing with a ul-list containing an unpredictable number of li-elements, ranging from 2 to 8. My goal is to capture votes using these li-elements and display the vote count on the specific element that was clicked. I have attempted to catch the click ...

javascriptjquery

What are the steps to determine if a radio has been examined through programming?

In my form page, users can input an ID to fetch profile data from a MySQL database using AJAX. The retrieved data is then displayed in the form for editing. One part of the form consists of radio buttons to select a year level (e.g., "1", "2", "3", etc). ...

javascriptajaxformsradio-button

Learn how to connect a Firebase account that was created using a phone number

✅ I have successfully implemented the feature that allows users to update their profile with a mobile number using verifyPhoneNumber and update currentUser.updatePhoneNumber ❌ However, a problem arises when a new user attempts to sign in with a phone ...

javascriptreactjsfirebasefirebase-authentication

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

Using Google Script Code in Sheet to input a key and click on the submission button

Is there a way to enable using the Enter key in addition to clicking the submit button to input data and save it to a cell? I'm having trouble getting my current code to work. Any suggestions on how to modify it? <script> var itemBox = document ...

javascripthtmlgoogle-apps-script

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

javascriptcssvue.jstransitionvuejs3

triggering e.stopImmediatePropagation() within an onclick event handler

Is there a way to retrieve the event object from an onclick attribute? I attempted the following: <a href="something.html" onclick="function(e){e.stopImmediatePropagation();}">Click me</a> In addition, I tried this: <a href="something.ht ...

javascriptjqueryhtmleventsonclick

The addition of plot bands in highcharts can cause the plot lines to vanish

Whenever I try to use plotbands between two points on the x-axis and draw a line between those two points using pointLines, the line never appears. Strangely, if the same process is done on the yAxis, everything works perfectly fine. Here is my code: $( ...

javascriptjqueryhighcharts

various issues with fonts and Uncaught Eval error

I've been encountering multiple font/style errors and an uncaught eval. I have attached a picture for reference. My Angular application is not functioning properly, and I suspect these errors may be the reason. However, I am unsure of their significan ...

javascriptangularbrowser

Implementing defaultProps in conjunction with withStyles

Currently, I am in the process of developing a component using material-ui withStylers and defaultProps. However, I have encountered an issue where the props of the component are not being retrieved in the styles objects unless they are explicitly passed t ...

javascriptreactjsmaterial-ui