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...
This article is a continuation of the previous one «End-to-End Testing of a Next.js Application Using Playwright and MSW» , and aims to explain why we ultimately opt to use a separate mock server despite the fact that it’s possible to mock current requests directly within the test environment. Initially, using the @mswjs/http-middleware library to start a separate server wasn't part of the plan. The idea was to hook into the existing server within the test environment. To do this, we add a .env.test file with the following contents: APP_ENV=test And in the main layout file app/layout.tsx , we’ll use this environment variable to determine whether the mock server should be enabled or not: import { server } from '@/mocks/server'; // only TEST ENV: run server.listen for e2e-testing if (process.env.APP_ENV === 'test') { server.listen({ onUnhandledRequest(request) { ...
"Если долго сидеть на берегу реки, можно увидеть, как проплывает труп фреймворка, который вы давно хотели изучить." Китайская народная мудрость Краткое содержание статьи: 1. Источники информации 2. React модули 3. React Native модули 4. JavaScript библиотеки 5. "Баги" 6. Выводы React Native - самая, пожалуй, интересная и быстроразвивающаяся платформа. Сегодня ты создаешь новый проект на базе её последней версии, и уже через несколько месяцев она успевает устареть на несколько релизов. И если ещё год назад React Native был еще достаточно сырым продуктом, то уже сейчас к нем написано множество как плагинов для работы с нативными компонентами, так и обычных react-компонент. Итак, с чего начать? Могу порекомендовать книгу "Learning React Native: Building Native Mobile Apps with JavaScript" Bonnie Eisenman. Несмотря на то, что примеры из книги написаны с использованием устаревшего синтаксиса, её прекрасно можно использовать как пособи...
Комментарии