39

I know Next.js is front-end but when I used API of next.js it can response and can manage route or anything about back-end can do. Then I want to know "Next.js api is back-end ?"

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Loga Thrim
  • 567
  • 1
  • 8
  • 11
  • 1
    It's a full stack framework. If you're starting out with a small side project, don't over-engineer with a separate backend. Just use Next.js API. You can configure it to use fastify as well if that's what you prefer. – Sumit Wadhwa Jul 19 '23 at 06:25

7 Answers7

31

Yes. Next.js is a pre-rendered React app in the client-side that users can view and interact with and can be considered as front-end. At the same time, it also does server-side rendering and API routes which can perform server-side code and access data in the database and can be considered as back-end.

hangindev.com
  • 4,573
  • 12
  • 28
  • 1
    Interesting. But as @danactive mentions, it seems not to be safe for static page generation but instead the api folder is used for api -> api communication? So in other words could you say: NextJS has an "api only back-end" to communicate to other back-ends? – Remi Jul 20 '22 at 12:05
  • 2
    Methods for static page generation like `getStaticProps` always runs on the server and never on the client. So it is safe to use server-side only code in those methods. You may learn more from [docs](https://nextjs.org/docs/basic-features/data-fetching/get-static-props#when-does-getstaticprops-run) That being said, it does require developers to have a good understanding which codes go to the client which do not in order to be "safe". – hangindev.com Jul 20 '22 at 12:45
26

Dynamic Routing has two folders pages or api. To stay on the front-end or client-side put your JavaScript / React DOM code in pages. The back-end or server-side of Next.js is with the api folder. The api JavaScript code is not executed in the browser but with Node.js so this is not safe for static page generation. When Next.js is hosted in the cloud with Vercel then your server-side JS will render, but on Netlify or other static hosts the api folder will be ignored or throw errors. It's like running Express.js code in the browser the JIT rendered will fail

Next.js v13 transitioned React folders from pages to app and currently supports both folders. Before v13 the React client code was stored in pages only.

danactive
  • 799
  • 7
  • 14
  • 2
    Guess it's a full stack framework – abdurrafay8801 Oct 17 '21 at 16:14
  • 1
    I read that it generates some backend bundles https://nextjs.org/docs/api-routes/introduction Does that mean credentials can be exposed? – fpilee Nov 04 '21 at 14:48
  • Environment variables will keep your secrets private. see the docs for Next.js v12 https://nextjs.org/docs/basic-features/environment-variables – danactive Jan 26 '22 at 17:57
  • can't run in AWS cloud ? and why say that-- this is not safe for static page generation? – will Aug 20 '22 at 14:30
  • AWS cloud platform is for executing Node.js code at run-time therefore not helpful for Static (Page) Generation as Node.js code is executed at build time. – danactive Aug 29 '22 at 20:34
4

Next.js api provides REST API. We are sending requests internally to our next.api routes. With this you can add business logic in your next.js project without writing any additional custom server code and without configuring any api routes. In node.js app, we need to separete api code into controllers and routes, then register each route in express app, then you need to make sure that you registered the routes in correct order.

The only drawback as of now, vercel does not support websocket connections. So you cannot have realtime services. But you can kinda make it almost realtime with SWR. More on SWR Basically, with swr, you tell next.js to fetch data periodically, keep the response in cache and serve it.

With this feature, Next.js provides everything to build a full-stack application. So next.js also simplifies the backend for us.

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
  • Next.js does not provide a REST API. It allows you to define custom HTTP endpoints, which is not the same as REST. See: https://restfulapi.net/ for more information – Flosut Mözil Jan 04 '23 at 18:38
1

I come from the asp.net world and am slowly, enjoying, learning javascript development. It does clash with me though when people describe something like Next.js, which I'm enjoying learning, as a backend.

To me it is more conceptually like an asp.net server-side frontend (Webforms, MVC, Razor Pages) etc. It seems its main concern is producing reactive frontend UI. Just because some of the frontend functionality runs/processed on server does NOT make it a backend AT ALL.

What about the fact it has api endpoints?

Well to me, a web api is only a means of enabling a frontend to talk to a backend across a network, the internet in this case. For me an api handles only very limited concerns; provides the endpoints, handles de/serialisation, talks http to the caller and that's kind of it, thin and dumb.

The backend doesn't really start till you get to your App layer and then the architectural fun can start, Application orchestration, Domain logic, dependency inverted data access layer etc. etc. all the things that talk to the complexity of designing robust software.

So much talk seems to be focused on where bits sit, is it on the client, is it on the server and less about the concern of what goes where.

I thing Next.js is an excellent server-side, frontend framework but whatever your onward stack into the backend, it's not a backend!

M H
  • 112
  • 8
1

Yes. Next js is framework of React js. you can use it both like- frontend and backend. Thanks.

Kaoser
  • 54
  • 6
1

Next.js is primarily a front-end framework for building web applications, but it also includes an API functionality that allows developers to create server-side APIs. These APIs can handle requests, manage routing, and perform other server-side tasks that are typically associated with back-end development.

So, to answer the question: yes, it can be said that Next.js API is a back-end functionality, although it is closely integrated with the front-end development workflow.

writeonlycode
  • 21
  • 3
0

It`s Hard To say Yes! Next.js can be used for simple backend development, but with certain limitations. Through its "API routes" feature, Next.js allows developers to create simple API endpoints. Here's a more detailed explanation:

  1. Simplicity and Constraints: Next.js's API routes are designed for simpler and more constrained scenarios. For more complex and scalable implementations, you might find it more suitable to use dedicated backend frameworks like Express.js.

  2. Database Interaction: While you can connect to a database from within these API routes, Next.js does not provide any built-in tools or utilities specifically for database interaction.

  3. State Management: The API routes in Next.js are stateless. If you need to maintain state between requests, you would have to resort to solutions like cookies or sessions.

  4. Frontend Interaction: Since only an API is provided, all interactions with the frontend have to be done via these API calls using HTTP requests and responses.

  5. Security Considerations: Although Next.js offers some security features, implementing a secure API requires attention to details, including authentication, authorization, and other security practices.

In conclusion, while Next.js offers backend capabilities via its API routes, it's primarily designed for frontend development. If you're looking to build a more sophisticated and powerful backend, dedicated backend frameworks might be more appropriate.

Abbas Moghadasi
  • 19
  • 2