What We Will Learn

What is Next.js?

Next.js is a React.js based full stack web development framework used to build static, client and server-rendered websites. It comes out of the box with many features that make developing fully-fledged websites quick and easy. Next.js allows us to either prerender our pages ahead of time, which makes our website static, or render pages on-demand on the server whenever users request them. In this tutorial, we will focus on server-side rendering.

With server-side rendering, the server handles each request that it receives. In most cases, this requires fetching some data from a database such as PostgreSQL. This ensures that each response has the most up-to-date data possible.

For testing, this implies that we have an extra service in our application—the database—ensuring it is handled with care during our tests. Moreover, it requires us to ensure that the database is reset and seeded correctly before each scenario is tested. Our demo full stack and Next.js application will use multiple different libraries, such as Prisma and Zod, to make our application more robust and secure.

What is Cypress?

Cypress is one of the most popular JavaScript testing frameworks available. It allows us to test our web applications from the user’s point of view, making our tests match real-world scenarios as closely as possible. Using Cypress, we can test our application while it’s running inside a real browser.