Next.js Discord

Discord Forum

nextjs app router, api display page

Unanswered
Levriero Sardo posted this in #help-forum
Open in Discord
Levriero SardoOP
I have a pages.tsx page in the app/dashboard folder, when I visit domain.com/dashboard it will display the page, it will go to the path, how do I make it an api, I use middleware to remove the api in the url so later the previous one domain.com/api/dashboard becomes domain.com/dashboard, so I want the page to appear not when going to the path, but going to the api, so when I access with the GET method domain.com/dashboard the api returns pages .tsx which essentially returns a display like the path

33 Replies

Levriero SardoOP
Arinji
So you want the rewrite the url, can you let me know which url you want to rewrite from and to @Levriero Sardo
Levriero SardoOP
path:
in want show it on this endpoint api:
its a api, i have redirect it to /player/login/dashboard:
@Levriero Sardo path:
Levriero SardoOP
i want show this to endpoint api in /player/login/dashboard
Arinji
use redirect then
rewrite will just redirect to the diff route withotu changing the url
@Levriero Sardo
@Arinji rewrite will just redirect to the diff route withotu changing the url
Levriero SardoOP
I want the path to be read as api
That's because I want to display it as a webview
@Levriero Sardo I want the path to be read as api
Arinji
Can you explain again what you want? What you want to redirect from, redirect to etc
@Arinji Can you explain again what you want? What you want to redirect from, redirect to etc
Levriero SardoOP
so I have page.jsx in the home/dashboard path, then to go to that display the URL must be like this:
domain.com/home/dashboard, now I want that page to also be displayed in the api, when I type domain.com/api/home/dashboard
middleware.ts:
import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const url = new URL(request.url);

  if (url.pathname === '/player/login/dashboard') {
    return NextResponse.rewrite(new URL('/api/player/login/dashboard', request.url));
  }
  return NextResponse.next();
}


form.tsx:
// pages/form.js
import React from 'react';

const Form = () => {
  return (
    <div>
      <h1>Form Component</h1>
      <form>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default Form;
Levriero SardoOP
@Arinji
@Levriero Sardo <@890486507872342027>
Arinji
Just copy your if statement, add another one with the if checking for your api route, and if it's true redirect to the page
@Arinji Just copy your if statement, add another one with the if checking for your api route, and if it's true redirect to the page
Levriero SardoOP
the app read method post not get, so i have to make the api render some page with api method post
if i make it redirect to the page, its same like i just write the path of the page in browser
@Arinji You don't want it in the url right?
Levriero SardoOP
yes, I want it as an api endpoint that displays the page
so
Arinji
import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const url = new URL(request.url);

  if (url.pathname === '/player/login/dashboard') {
    return NextResponse.rewrite(new URL('/api/player/login/dashboard', request.url));
  }
  if (url.pathname === '/api/home/dashboard') {
    return NextResponse.rewrite(new URL('/home/dashboard', request.url));
  }
  return NextResponse.next();
}
Levriero SardoOP
yea this is middleware
what inside the /api/home/dashboard?
using method post
@Levriero Sardo using method post
Arinji
all requests go through middleware
regardless of their method
Arinji
@Levriero Sardo worked?
@Arinji <@753298841712721961> worked?
Levriero SardoOP
I haven't tried it yet, I have other work to do, I'll try later