API Routes not working.

[Fantros]

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

I just wrote this code and enter the link it is throwing 404.

[icyJoseph]

Hi,

Could you share more about your setup? What URL are you reaching for, and where's this API handler placed?

Resolution

OP is using API routes, but then doing next export which doesn't support API routes.

[icyJoseph]

Isn't GitHub Pages for static sites only? Did you use next export? If so the problem is that when using export then no server is present, so API routes don't work at all. You should've seen this warning in your terminal:

warn  - Statically exporting a Next.js application via `next export` disables API routes.
This command is meant for static-only hosts, and is not necessary to make your application static.
Pages in your application without server-side data dependencies will be automatically statically exported by `next build`, including pages powered by `getStaticProps`.
Learn more: https://nextjs.org/docs/messages/api-routes-static-export

Could you confirm?

[Fantros]

workflows are set like this

[icyJoseph]

Yeah, so you are doing export, that outputs static HTML, https://nextjs.org/docs/advanced-features/static-html-export, which cannot have server functionalities by definition. That's why API routes do not work, that's why middleware won't work, that's why GetServerSideProps, and others won't work either.

Here's a list, https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features, of everything that doesn't work whe using next export.

Reposting for visibility:

Features that require a Node.js server, or dynamic logic that cannot be computed during the build process,
 are not supported:

- [Image Optimization](https://nextjs.org/docs/basic-features/image-optimization) (default loader)
- [Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing)
- [API Routes](https://nextjs.org/docs/api-routes/introduction)
- [Rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites)
- [Redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects)
- [Headers](https://nextjs.org/docs/api-reference/next.config.js/headers)
- [Middleware](https://nextjs.org/docs/middleware)
- [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)
- [fallback: true](https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-true)
- [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)

If you want API routes to work, you need a server, and I don't think GH pages supports that either. You'd need to host your project somewhere like Vercel or so, but then I guess that'd defeat the purpose of using GH pages.

[Fantros]

Then I have nothing to do I need to be able to use the api. Does Vercel cover this?

[icyJoseph]

Yes in Vercel you can deploy Next.js projects which run using a server (next export is also supported). There's fairly good limits for fair use.

• https://vercel.com/docs/concepts/limits/overview
• https://vercel.com/docs/concepts/limits/fair-use-policy

It is as easy as going to vercel.com, login with your GitHub account and select a the repository, then I think you tell Vercel that it is a Next.js project, and it is done. Every time you push to a remote branch a preview page is made, and pushing to main/master, by default, updates the main deployment.