Nextjs Api routes not working properly

Support
,
1

I’m using nextjs’s api route as a backend.
One of my functions is under /pages/api/stripe.ts

imgnt
imgnt1183×210 24.5 KB

However when I deploy it, it seems to be read as an empty file with 0bytes?
Also accessing the route doesn’t work on netlify, however it does work locally while using netlify dev

Update: As an update to this problem, I realized all of my bad routes so
misite/badroute returns a 502 timeout instead of a 404 error. However this doesn’t happen locally or netlify dev, only on the netlify site

3

Hi @moemakura23, thanks for the post and welcome.
Kindly make sure your api route is exporting the handler function like the example below.

JavaScript

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

TypeScript

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: 'John Doe' })
}

If the above does not help, if possible can you share a code snippet of your api route for me to help with the debugging.

Thanks.

5

Thank you clarnx. I’ve attempted to put that exact piece of code under.
src/pages/api/test.ts

However when I tried to call the route /api/test on my site, it simply times out.
I currently don’t have a netlify toml yet, the function would also work as a netlify lambda function, I’m just trying to figure out why my site doesn’t run nextjs api functions

1 Like
6

I figured out the issue, apparantly routing breaks down when I use the line

import { ShoppingCart } from '@mui/icons-material'

but works when I use

import ShoppingCart from '@mui/icons-material/ShoppingCart'

specifically when I use nextjs

1 Like
7

@moemakura23, glad to know you were able to figure out what was causing the problem.

Regarding the imports you can still use the option above.
Before you can use the option above you need to configure your bundler settings to enable you to use named imports.

Kindly read the official MUI documentation at the link below on how to configure your bundler settings to enable you to use the option above.

For more information about using MUI icons during development, also visit the link below.

https://mui.com/material-ui/guides/minimizing-bundle-size/#development-environment

Thanks.

1 Like
8

Glad you found your solution @moemakura23

1 Like