Internal Patterns

This page helps developers review common use cases for the technologies used in this project. Each section is both a visual example and a code reference for implementation and usage patterns.

Next Intl

Esta es una traducción para el componente del cliente

Esta es una traducción para el componente del servidor

Axios
Client example: fetch the local `/api/hello` route on demand.
Server example: use the shared Axios client during render.
MSW
Client example: fetch the same `/api/hello` route and let MSW intercept it when mocks are enabled.

MSW status:Disabled. To enable it set NEXT_PUBLIC_USE_MOCKS env to true

Server example: render the same `/api/hello` route and let MSW intercept it in Node when mocks are enabled.

MSW status: Disabled. To enable it set NEXT_PUBLIC_USE_MOCKS env to true

The `/api/hello` request could not be completed.

Day.js
Client example: format a sample date with Day.js using the current app locale.

This value reacts to the language selector above.

Locale: es

Sample date: 2026-05-15

Formatted date: 15 de mayo de 2026

Server example: format the same sample date with Day.js during render using the current app locale.

This value is formatted on the server before the page reaches the browser.

Locale: es

Sample date: 2026-05-15

Formatted date: 15 de mayo de 2026

TanStack Query
Client example: use TanStack Query to fetch the local `/api/hello` route on mount.

This example uses <code>useQuery</code> and manages loading, success, and error states automatically.

Server example: prefetch `/api/hello` on the server and hydrate it into a client query.

This example uses HydrationBoundary so the client query starts with server data immediately.

Zustand
Client example: update a shared UI preferences store from one component.

This component writes to a global Zustand store. The preview next to it reads the same state independently.

Compact mode
Show hints
Client example: read the same global UI preferences from another component.

This preview reacts immediately when the controls update the store.

Compact mode: OffShow hints: On

This block intentionally changes its spacing when compact mode is enabled.

Hint: global UI state is useful for app-wide preferences, toggles, and display behavior.