node.jsnext.jsbackendprismareact-fullstack

Is the Idea of Backend non-existent in NextJS and Prisma Project?


I am new to the full-stack and specifically NextJs. I had a small chance to develop a simple blog post web app using MERN stack. while developing the app, I separated the frontend and backend folders and used restful APIs to communicate between frontend and backend and hence making an MVC(Model,View,Controller) architecture. However, with NextJS and Prisma used together, is the Idea of backend non-existent,if not How can I make the MVC architecture using NextJS,Prisma and SQL or NoSQL database?


Solution

  • When you think about a web application, you can break it down into a few main pieces.

    First, you have the client. The client is the user-facing application; it's what the user interacts with.

    Second, you have the server. The server is the backend and is meant to handle the business logic of the application. It also interacts with the database.

    Third, you have the database, which is where you store your data. You don't want your database to get compromised so you need to protect the connection string that grants access to the database. The client of the web app shouldn't store anything like the database connection string because the client lives on the users' machines. This is why your backend, or the server, should be the only thing that has access to interact with the database.

    Next.js is a framework to React. Unlike React, Next.js has two parts to it: client and server. You're already familiar with both of those parts. What's different now is that Next.js is doing some of the work for you. Previously, you had to create a new Express app to handle the server. Now, Next.js already has a server for you. You can use the Next.js server to handle API requests, interact with the database, etc. You'll have to be careful with environment variables. One of these variables would be your database connection string. If you preface the environment variable with NEXT_PUBLIC_, the environment variable will be exposed to the client, and therefore the user.

    You can still use the MERN stack that you're familiar with and just swap out React with Next.js.

    Prisma is an ORM to communicate with your database. It doesn't replace anything in the MERN stack. You'd use it to interact with your database, such as reading/writing data, defining the schema, etc. You can use it in an Express app or in the server code of a Next.js application.