We will have API routes that will expose three endpoints: one to add a new food recipe to the db, the other to edit a specific food recipe, and the last to delete a food recipe from the db. We will have two modals/dialogs where we can add new food recipes and edit an existing food recipe. We will have presentational components that will display little detail of each recipe on the foods list page, and a header component to display the header. /foods: Displays all the food recipes in our app.So our Next.js app will have two components for the two views/routes/pages.
Our app will have two pages, one to display all the food recipes and the other to display a specific food recipe. We will use the Prisma client to perform queries to our DB. GetStaticProps (Static Generation): Fetch data at build time. Next.js has three unique functions we can use to fetch data for pre-rendering: There are many ways in Next.js where we can fetch data. Prisma's being a connection to a database makes it ideal for us to call it in our Next.js app to fetch data from the backend for us. This means that we can build the UI components in Next.js and also build our API routes in the same Next.js app, so Next.js contains the client and server.
Next.js combines both frontend code and backend code.
The mechanical part is automatically taken care of for us by Prisma We are left with a cleaner code that is easier to maintain. But as we can see we don't have to write SQL commands and queries, Prisma takes care of that for us. The findMany, create, and update methods run SQL queries against our database.
0 kommentar(er)
