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.

A server is a combination of a computing machine and an application running on it. Powered by internet, a server can handle user requests and produce outputs in a suitable format.

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 page with a header, main and footer sections.
• Header should contain a navbar with category links and a cart button.
• Footer needs to contain social media icons
• Main section needs to contain 3 cards to reach seasonal collections of those categories.

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: Visit home page URL
    ReactComponent->>NextJSBackend: Call backend fetch function
    NextJSBackend->>MongoDB: Fetch session data
    MongoDB-->>NextJSBackend: Return session data
    NextJSBackend-->>ReactComponent: Response (success or error)
    ReactComponent-->>User: Render home page with cart info
```

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-Commerce domain, which will demand elaborate sequence diagrams.

• First line in the code is sequenceDiagram (after mermaid of course). This tells mermaid that the next few lines contain code for a sequence diagram.
• The next segment is where we declare the participants in the diagram. Our participants are User, React component, Next.js Backend and MongoDB. When there is a space in the name declare an alias like React or NextJSBackend. This helps in linking the participants with arrows in the next section.
• Now we start linking the sequence from left to right and back to the starting point. Every link will contain a line text in the end.

If you want to be a programmer your team respects, then create design diagrams to avoid mistakes and gaps later. Many well structured and cultured teams mandate a sequence diagram before programming. Now that we clearly know what needs to be done, we can start programming.