Next.js Discord

Discord Forum

API index file

Answered
Yellowhead catfish posted this in #help-forum
Open in Discord
Yellowhead catfishOP
is it possible to have like example.com/api and under that just a list of all api routes? if i try to make an api.tsx in my pages folder, it doesnt work, neither does adding index.ts under the api folder work
Answered by joulev
You can have a route at /api by making pages/api/index.js or app/api/route.js, but for it to list all api routes you have to write the logic to do that yourself
View full answer

23 Replies

@Yellowhead catfish is it possible to have like example.com/api and under that just a list of all api routes? if i try to make an api.tsx in my pages folder, it doesnt work, neither does adding index.ts under the api folder work
joulev
You can have a route at /api by making pages/api/index.js or app/api/route.js, but for it to list all api routes you have to write the logic to do that yourself
Answer
joulev
It’s better to just write a markdown file documenting your api routes imo
@joulev You can have a route at /api by making pages/api/index.js or app/api/route.js, but for it to list all api routes you have to write the logic to do that yourself
Yellowhead catfishOP
I tried index.ts but it didn't work
does it have to be js or something?
@Yellowhead catfish I tried index.ts but it didn't work does it have to be js or something?
joulev
.ts should work too. Could you post the code here?
@joulev .ts should work too. Could you post the code here?
Yellowhead catfishOP
wait is it supposed to be in the format of an API route or like a normal page
i feel so dumb its meant to be an api route not a normal page...
i accidentally made it formatted like a normal page instead of an API route, it works now
joulev
yup glad you fixed it
@joulev yup glad you fixed it
Yellowhead catfishOP
is it possible to return html with the api route? it just renders as basic text but i want it to render as html
@Yellowhead catfish is it possible to return html with the api route? it just renders as basic text but i want it to render as html
joulev
why don't you use the app router here? make app/api/page.tsx and return a react component there, your /api route is now an html route
joulev
this works for me
import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const html = `
    <!DOCTYPE html>
    <html>
      <body>
        <h1>Hello, World!</h1>
        <ul>
          <li>
            <a href="https://google.com">Google</a>
          </li>
          <li>
            <a href="https://facebook.com">Facebook</a>
          </li>
        </ul>
      </body>
    </html>
  `;

  res.setHeader("Content-Type", "text/html");
  res.status(200).send(html);
}
Yellowhead catfishOP
if no, how do i make a new page using the app router
Yellowhead catfishOP
ohh
@joulev yes you can
Yellowhead catfishOP
why should i use app instead of pages though? using your code works fine with the pages router
@Yellowhead catfish why should i use app instead of pages though? using your code works fine with the pages router
joulev
in the app router you can use react components there. if you use the pages router with an api route like the above, technically it works but you might as well just use express or a more minimal backend framework, since you are returning raw html
nextjs is overkill if you want to return raw html like this
Yellowhead catfishOP
meh i dont really see a need for react components there
@joulev nextjs is overkill if you want to return raw html like this
Yellowhead catfishOP
well my page also has way more than just this api, its also an actual site
joulev
well, if it works it works, that's just my recommendation
Yellowhead catfishOP
thanks for the suggestion