Next.js web application with database

Next.js Create a flash card

Next.js is a framework for building full stack web applications with React frontend. When I say full stack I mean everything you need to build any kind of web application, for any use case. You can build functions to talk to databases or external systems like AI inference APIs with Next.js. You can build React functional components based frontend with Next.js. Apart from this, the developer experience is also great, as you can instantly see the changes you make, while running your app locally. Next.js shines in areas like layouts, navigation (routing), performance and a lot more.

If you are wondering how a Next.js webapp works and delivers UI to a user, check the below flow chart.

All the code you write are packaged as HTML, CSS and JavaScript. The only tool that understands all these and serves them as files to your users is a node server. There are other tools similar to it, but for our scope let us stick to node. So when you are developing a Next.js web application you will be using a node server to run and test your code simulating production.

Full-stack Web Application

Before we start developing a full stack web application with Next.js let us refresh our requirements in Issue #1. Because we will be building a production grade application for those requirements in this lesson.

From the requirements following deliverables are very clear,

• We need a form to capture location data, a list page and a view page to show the location details in the frontend.
• We need a backend to validate the incoming data from the frontend and store it. We also need the backend to convert data to a format which frontend can easily understand and display.
• We need a database to store locations in a place which is reliable and will be accessible to anyone (installers, operators, users, etc.).

With Next.js, the solution to satisfy all the requirements will be written in one codebase and in one language. This is why they are called full-stack web applications. There are software teams which write backend in one language like Java and frontend in React. Both approach has pros and cons. But think about it this way, a company choosing the full-stack benefits from hiring only one expertise. Full-stack developers can build, operate and troubleshoot a complete application. This means faster time to market, better throughput and issue resolution time. Hence companies prefer full-stack tech stacks.

Back to the requirements. When multiple systems are involved in a feature, then it is an industry standard practice to draw sequence diagrams. This explains all the activities happening inside the system to achieve the end goal. Boxes are components or a piece of code and the arrows show the direction of data.

Code for this in mermaid is given below

```mermaid
sequenceDiagram
    participant User
    participant ReactComponent as React Component
    participant NextJSBackend as Next.js Backend
    participant MongoDB as MongoDB
    User ->> ReactComponent: Fill in location details and click "Add"
    ReactComponent ->> NextJSBackend: Call backend server actions function
    NextJSBackend ->> MongoDB: Insert location data into "locations" collection
    MongoDB -->> NextJSBackend: Acknowledgment of data insertion
    NextJSBackend -->> ReactComponent: Response (success or error)
    ReactComponent -->> User: Show success or error message
```

This is a very simple example to get started, most of the teams ignore straightforward interactions like this while documenting. In our next lesson you will work on some complex tasks in E-Mobility domain, which will demand elaborate sequence diagrams.