Can I use NextJs API routes to handle both web and mobile app?

Question

I want to create web app in Nextjs and in the future mobile app in React Native. But I am confused what api to use. Do you think that the Nextjs api can handle both web and mobile apps? Is this possible and is it good idea at all? Should I use PHP backend for that? Thank you very much.

Undercroft

Answer 1

With the assumption that you are talking about API Routes :

I would ask you that you think through the scale of your web and app. If this is a simple web/app that you do not expect to grow much - The NextJS API which is similar to standing up an nodejs express server is not a bad option.

Remember a few considerations when designing this API

1. You may have to distinguish the request origin (web/app)
2. CORS may have to be customized - Next exposes this
3. You could set an app specific route to ensure isolation or use headers to distinguish behavior if your application bifurcates in the future.

These concerns are shared even if you made a PHP, ExpresJS or any other API middleware.

Once you are past all this, i would ask you to consider

1. Using a GraphQL server like Apollo that works nicely with Next and is custom built for this purpose..
2. Evaluating API Gateways for security and scale.

Spitz

Thank you very much :) I am planning to use GraphQL, but now I dont really know how much this project could grow. And Apollo seems to be nice. – Devoe

Great point on scaling. With modern containerised approaches you may want to scale just your API. – Exam

My questions is simpy concerning Authentication and checking whether the incoming Mobile app requests are authenticated? IE maybe some middleware checking the request headers for an access or id token? How would this be best implemented? – Inductee

Correct, For any simple usecases use the API middleware itself and inspect the req - nextjs.org/docs/api-routes/api-middlewares. For complex use cases consider next-auth next-auth.js.org or passport which is a fully fledged solution - It’s probably a good idea to raise a new question and explain your use cases – Spitz

Answer 2

You don't use any external tools at all.

1. Next JS has serverless model. So, you don't need to mess with BE.
2. You can create a number of API routes you want. in /pages/api folder. You can even split like /pages/api/desktop and /pages/api/mobile folders.
3. You connect your database (MongDB, sql etc) via /middleware/your_file.js. Here is example for MongoDB
4. If you like, you can even add some security (ex: Auth0, next-auth etc) to secure your API routes created in /pages/api folder. Example for Auth0

After, you can access you data througth API calls. Very good!

Carpentaria