End-to-End testing of a Next.js application using Playwright and MSW
Server and Client Components in Next.js Before writing end-to-end tests, let’s first understand how Next.js works and what specific features it introduces - namely, the concept of server and client components. In the past, we typically had only client-side JavaScript and separate code that ran on the server. Next.js revolutionized the frontend world by merging these two concepts into a unified system, allowing developers to seamlessly transition between components. The only real distinction now lies in explicitly declaring «use client» at the top of files that need to run in the browser. This can become a source of confusion if you're not familiar with how both types of components work. By default, all components in Next.js are server components and are rendered on the server. This comes with both advantages and limitations. For example, server components can access data directly, work with environment variables, and securely use access tokens. On the flip side, they cannot use Re...