Frontend

## Introduction{overview}

**Error management is a fundamental aspect of software development. It involves anticipating, detecting, and addressing issues within a system. By implementing effective strategies for handling errors, developers can ensure their projects operate reliably even in unforeseen circumstances.**

This can be done through throwing and catching exceptions, handling HTTP errors, and displaying appropriate error messages. There are four main categories of errors:

- **Logical errors** - These are errors that arise when the program runs but does not return the expected results. This means that the logic applied in the code is incorrect, even though the syntax may be correct.
- **Generated errors** - These are errors created based on specific conditions in the code, typically as a result of incorrect input data or unexpected states.
- **Compile-time errors** - Errors that happen during the compilation of the code when the programmer uses incorrect syntax, missing elements, or incompatible data types. The compiler cannot process the code until these errors are fixed.
- **Runtime errors** - These are errors that appear when the program is running. They can be caused by various issues, such as attempting to access non-existent resources, erroneous mathematical operations (e.g. division by zero), or attempts to access unallocated memory.

Since errors can have dire consequences, including system crashes, user logouts, or data loss, it is important to learn how we can safeguard our software. In this article, we will discuss error handling offered by Next.js 15. First, we would like to cover three key files: `error.tsx`, `global-error.tsx`, and `not-found.tsx`. We will explain their significance and when it is worthwhile to use them. Then we will analyze error handling in different parts of the project.

Request a free Next.js consultation{contactBox}Facing technological challenges? Contact us for a free consultation in just 1 step!

## error.tsx{id}

The convention of the error.tsx file allows for handling unexpected errors while using the application. It is useful for catching unexpected errors occurring on both the server and client side, as well as for displaying a fallback UI. An important point is that the `error.tsx` must be a client component, meaning it must include the directive `use client`. In production environments, errors returned from server components are scrubbed of specific details, which differs from behavior in the development environment, where the Error object retains complete error information.

Available parameters of the Error function:

- **error**
  - **error.message** - contains the error message. For client component errors, this will be the original message, whereas for server components, it will be a general message that helps avoid leaking sensitive details.
  - **error.digest** - contains an automatically generated error digest that can be used to locate a specific entry in the server-side logs.
- **reset** - a function for resetting the error boundary. When the reset function is called, it will attempt to re-render the contents of the error boundary. If successful, the fallback error component will be replaced with the result of the correct rendering. It is worth noting that error recovery can be useful in cases of temporary problem that may resolve with a retry.

### ADDITIONAL INFORMATION:

It is a good practice to use React DevTools to test error states. We can also report errors to parent error boundaries. If you want errors to be passed to a parent error component, you can report them while rendering the error component. This enables better management and organization of error handling in the application.

![example of error page](/uploads/article_1_48fdc70750.png)

```js
import Link from "next/link";
import React from "react";
import Image from "next/image";
import { BreakLine } from "@atoms/BreakLine";
import { Layout } from "@templates/Layout";
 
export default function Error(({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
    return (
       <Layout>
          <div className="flex items-center justify-between">
             <div>
                <h1 className="text-5xl font-bold">
                   Oops... <br />
                   Something went wrong
                </h1>
                <p className="my-12 max-w-[472px] text-lg">
                   Something’s not working right now. Try again later or head back to homepage.
                </p>
                <Button
                   onClick={() => reset()}
                   className="rounded-md bg-blue-600 px-10 py-2.5 text-base font-semibold uppercase tracking-widest text-white transition-all hover:bg-blue-500"
                >
                   Try again
                </Button>
             </div>
             <div className={"mt-34"}>
                <Image
                   src={"/images/error.png"}
                   alt={"alternative text for your image"}
                   width={380}
                   height={333}
                />
             </div>
             <BreakLine />
          </div>
       </Layout>
    );
}
```

## global-error.tsx{id}

This file is used for handling global errors that were not caught by `error.tsx`. It is important to remember that this file overrides the `layout.tsx`, meaning it must contain the `<html>` and `<body>` tags. This is a key difference compared to the `error.tsx`. The GlobalError function accepts the same parameters that were discussed in relation to the Error object.

### ADDITIONAL INFORMATION:

In the development environment, when an error occurs, instead of the interface from the `global-error.tsx`, an error overlay appears on the screen. This overlay presents detailed information about the error, which greatly facilitates the debugging process and enables developers to quickly identify and resolve issues in the code.

## not-found.tsx{id}

When the server cannot find the requested resource, it returns a `404 error - "Not Found"`. This is a very common problem that occurs when an incorrect URL is provided, or when a user attempts to retrieve a file that has been removed from the server.

Next.js provides a friendly way to address this issue. In the `/app` directory, we create a file named `not-found.tsx`, in which we define a functional component called `notFound()`. This component is, by default, a server component, but we can convert it into an asynchronous function. This approach is especially useful when we want to fetch data and provide additional information to the client, for example, by suggesting similar products in an online store or supplying dynamic content based on the URL path.

### THINGS TO REMEMBER

The `not-found.tsx` file should be defined globally by placing it in the `app/not-found.tsx` directory, allowing for consistent handling across the system. However, if you wish to manage errors in a specific manner for certain sections of the project, you can create dedicated error files. For instance, for a page displaying products, the `not-found.tsx` should be placed in the relevant directory, such as `app/products/product/not-found.tsx`. This provides flexibility in error management as well as consistent oversight across the entire project. The `not-found.tsx` components do not accept any props. Importantly, in addition to capturing expected errors using `notFound()`, the global `app/not-found.tsx` also handles all unmatched URLs across the entire system. This means that clients who visit a URL that is not supported will see the UI defined in the `app/not-found.tsx`.

![example of not found page](/uploads/article_2_0202bc8eae.png)

```js
import Link from "next/link";
import React from "react";
import Image from "next/image";
import { BreakLine } from "@atoms/BreakLine";
import { Layout } from "@templates/Layout";
import { PopularProducts } from "@organisms/PopularProducts";
import { getPopularProducts } from "@api/products";
 
export default async function NotFound() {
    const { products } = await getPopularProducts();
 
    return (
       <Layout>
          <div className="flex items-center justify-between">
             <div>
                <h1 className="text-5xl font-bold">
                   404 <br />
                   Product not found
                </h1>
                <p className="my-12 max-w-[472px] text-lg">
                   We couldn’t find the product you’re looking for. Head back to Homepage or try browsing another product.
                </p>
                <Link
                   href="/"
                   className="rounded-md bg-blue-600 px-10 py-2.5 text-base font-semibold uppercase tracking-widest text-white transition-all hover:bg-blue-500"
                >
                   Back to homepage
                </Link>
             </div>
             <Image
                src={"/images/not-found.png"}
                alt={"alternative text for your image"}
                width={380}
                height={333}
             />
          </div>
          <BreakLine />
          <PopularProducts products={products} />
       </Layout>
    );
}
```

## ErrorBoundary and reset function{id}

The ErrorBoundary component allows for capturing and handling errors that arise in child components. This helps to avoid the propagation of errors throughout the component tree. This component accepts a fallback parameter, which can be used to pass an error message in the form of a fallback component or text.

Advantages of using ErrorBoundary:

- **Isolation of errors**: Errors in one component do not impact other parts of the application, ensuring stability throughout.
- **Enhanced user experience**: Interactions can continue in functional areas of the interface, significantly improving overall usability.
- **Error logging**: By enhancing ErrorBoundary to log error information to external services such as Sentry, developers can effectively monitor and diagnose problems without disrupting the UX.
- **Custom fallback UI**: ErrorBoundary allows for the creation of a custom fallback UI that provides informative error messages along with options to refresh the page or navigate back to a safe state.

It is important to note that the causes of rendering errors can be temporary, so it is a good idea to implement a reset function that enables re-rendering of the component after an error has happened. This could be, for instance, a button that allows the component to be re-rendered after it has failed to render (see the example in `error.tsx` section).

## Handling Errors in Layouts{id}

If you already have knowledge about routing in your Next.js app, we can discuss issues related to error management. However, if you want to familiarize yourself with the basics first, we encourage you to read the article: [Next.js 14: Exploring fundamental concepts](/blog/frontend/next-js-14-exploring-fundamental-concepts), in which we mention routing in Next.

Error boundaries do not catch errors thrown in `layout.tsx` or `template.tsx` components of the same segment. To handle errors in `layout.tsx` using the `error.tsx`, it is necessary to move it to the parent segment. We can consider this topic in the context of a sample blog with a list of articles and individual articles. In this case, if we want to handle errors in `layout.tsx` for an article, the `error.tsx` must be placed in the blog directory, which is the parent directory.

An alternative to this approach is using a global error management file - `global-error.tsx`. In this case, we need to define our own HTML structure, which will include the `<html>` and `<body>` elements. This allows us to manage error management more flexibly within the same directory.

## Handling Errors in Root Layouts{id}

To effectively handle errors in the main components, you should use the `global-error.tsx` located in the app directory. Unlike the `error.tsx`, the `global-error.tsx` boundary encompasses the entire application, and its returned fallback component replaces the entire main layout. This component is rarely triggered since the boundaries of other components (if defined) usually catch most errors.

Even when using `global-error.tsx`, it is also advisable to establish an `error.tsx`, whose component will be rendered in the main layout. This way, the error component will be included in the global shared interfaces.

## Handling Server-Side Errors{id}

In Next.js, proper management of server errors is essential for creating a user-friendly application. When an error occurs in a server component, Next.js directs the Error object (stripped of sensitive error information in the production version) to the nearest `error.tsx`. It is important to remember that the `message` property provides a general description of the error, while `digest` provides an automatically generated error digest that can be used to match the appropriate error in the server logs.

To manage the state of Server Actions, including error handling, it is recommended to use the `useActionState` hook. This approach helps avoid using `try/catch` blocks for expected errors, which should be treated as return values rather than thrown exceptions. Using `useActionState`, we can pass an action and leverage the returned state to display an error message to the visitor.

{class-fileName}app/actions.ts

```js
'use server';
import { redirect } from 'next/navigation';
 
interface NewsletterSubscribeState {
    ...
}
 
export async function subscribeToNewsletter(prevState: NewsletterSubscribeState, formData: FormData) {
    const email = formData.get('email');
    const res = await fetch('https://.../subscribe', {
        method: 'POST',
        body: JSON.stringify({ email }),
        headers: {
            'Content-Type': 'application/json',
        },
    });
 
    const json = await res.json();
 
    if (!res.ok) {
        return { message: 'Please enter a valid email address.' };
    }
 
    redirect('/thank-you');
}
```

{class-fileName}app/ui/newsletterSubscription.tsx

```js
'use client';
import { useActionState } from 'react';
import { subscribeToNewsletter } from '@/app/actions';
 
const initialState = { message: '' };
 
export function NewsletterSubscription() {
    const [state, formAction, pending] = useActionState(subscribeToNewsletter, initialState);
 
    return (
        <div className="flex items-center justify-center min-h-screen bg-gray-100">
            <div className="bg-white p-8 rounded-lg shadow-md w-96">
                <h2 className="text-2xl font-semibold mb-4">Subscribe our newsletter</h2>
                <form action={formAction}>
                    <div className="mb-4">
                        <label htmlFor="email" className="block text-sm font-medium text-gray-700">Adres email</label>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            required
                            className="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                    </div>
                    <p aria-live="polite" className="text-red-500 text-sm mb-2">{state?.message}</p>
                    <button
                        type="submit"
                        disabled={pending}
                        className={`w-full py-2 px-4 rounded-md text-white font-semibold ${pending ? 'bg-gray-400' : 'bg-blue-600 hover:bg-blue-700'} transition duration-200`}
                    >
                        {pending ? 'Loading...' : 'Subscribe'}
                    </button>
                </form>
            </div>
        </div>
    );
}
```

## Summary{id}

Error management in Next.js is quite simple. The framework offers three main files for addressing errors: `error.tsx`, `global-error.tsx`, and `not-found.tsx`, which assist developers in maintaining their applications in good condition. Each of these files has its unique functions and roles, and their proper use contributes to the quality and stability of the overall system. Thanks to these error management mechanisms, programmers can quickly respond to potential challenges and prevent failures.

It is important to remember that ensuring effective error management is crucial for maintaining a high-quality application. For this reason, when designing an error management strategy, it is essential to focus on providing users with clear communication. This means that visitors should receive understandable information about any problems that arise, as well as guidance on how to resolve them. Regardless of the programming language being used, developers should always pay attention to error management in order to ensure high-quality applications and positive visitor experiences.



# **Next.js 15: Error Handling best practices for code and routes**
## Learn Error Handling in your Next.js 15 app. Discover how to handle errors in your code, manage server issues, and ensure smooth displays on routes

large_error-handling-imageB.png

medium_error-handling-imageB.png

small_error-handling-imageB.png

thumbnail_error-handling-imageB.png

error-handling-imageB.png

Introduction

error.tsx

global-error.tsx

not-found.tsx

ErrorBoundary and reset function

Handling Errors in Layouts

Handling Errors in Root Layouts

Handling Server-Side Errors

Summary

Next.js 15: Error Handling best practices for code and routes

## Intro{overview}

**One of the key elements of any website or web application is routing. It enables users to navigate between different views and pages. Routing can be static or dynamic. In the case of static routing, the paths are predefined and do not change. Dynamic routing, on the other hand, is the practice of creating paths based on dynamic data and user interactions.**

In this article, you will learn how to use dynamic routes in [Next.js](https://nextjs.org/{nofollow}) by utilizing the app router and which conventions to follow. We will also cover more advanced topics such as catch-all segments, static page generation (SSG), and the use of the `generateStaticParams` function.

Request a free Next.js consultation{contactBox}Facing technological challenges? Contact us for a free consultation in just 1 step!

## Defining dynamic routes{id}

Next.js allows the creation of dynamic paths using a convention with square brackets. Importantly (and this is a change compared to version 12 and its Pages Router), paths are created solely through folders.

```js
app/
└── blog/
    └── [slug]/
        └── page.tsx
```

In this case, the `[slug]` folder is a dynamic **segment** of the article page path and is passed to the component as `params` with a name corresponding to the folder's name.

```js
example url: `/blog/introduction-to-next-js`
params: { slug: 'introduction-to-next-js' }

example url: `/blog/developing-a-great-website-in-next-js`
params: { slug: 'developing-a-great-website-in-next-js' }
```

```js
// src/app/blog/[slug]/page.tsx

export default function Article({ params }: { params: Promise<{ slug: string }> }) {
    const slug = (await params).slug;

	return <h1>Article slug: {slug}</h1>;
}
```

Parameters are passed not only to [page](https://nextjs.org/docs/app/api-reference/file-conventions/page{nofollow}) as mentioned above but also to [layout](https://nextjs.org/docs/app/api-reference/file-conventions/layout{nofollow}), [route](https://nextjs.org/docs/app/building-your-application/routing/route-handlers{nofollow}), as well as to functions like [generateMetadata](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function{nofollow}) and [generateStaticParams](https://nextjs.org/docs/app/api-reference/functions/generate-static-params{nofollow}).

### USEPARAMS

The above example pertains to server components and functions executed on the server side. If you want to use a parameter in a client component, you can use the `useParams` hook.

```js
'use client'
 
import { useParams } from 'next/navigation'
 
export const ExampleClientComponent = () => {
	const params = useParams<{ category: string; slug: string }>()
	
	// Route -> /blog/[category]/[slug]
	// URL -> /blog/next-js/introduction-to-next-js
	// `params` -> { category: 'next-js', slug: 'introduction-to-next-js' }
	console.log(params)
	
	// ...
}
```

### NESTED DYNAMIC ROUTES

Dynamic paths can be nested as needed. Below is an example of a folder structure for a blog category page with the path `/blog/frontend/2`:

```js
app/
└── blog/
    └── [category]/
        └── [pageNumber]/
            └── page.tsx
```

```js
// src/app/blog/[category]/[pageNumber]/page.tsx

export default function ArticleList({
    params,
}: {
    params: Promise<{ category: string; pageNumber: string }>;
}) {
    const category = (await params).category;
	const pageNumber = (await params).pageNumber;

    return (
        <>
            <h1>List category: {category}</h1>
            <p>Current page: {pageNumber}</p>
        </>
    );
}
```

## Catch-all segments{id}

Let's expand our example of an article list by adding a sub-category page. All blog paths will include a list of articles with pagination. We want the pagination to be reflected in the path. Here are possible examples of the sub-pages:
- **/blog/2**
- **/blog/frontend/2**
- **/blog/frontend/react/4**

Using nesting, the file structure might look like this:

```js
app/
└── blog/
    ├── [pageNumber]/
    │   └── page.tsx
    └── [category]/
        ├── [pageNumber]/
        │   └── page.tsx
        └── [subcategory]/
            └── [pageNumber]/
                └── page.tsx
```

Assuming that each sub-page includes filters, a list, and pagination, a potential issue is that each page.tsx file may render a similar view, leading to excessive complexity and maintenance difficulties.

With Next.js, we can use the **Catch-all Segments** technique to handle all dynamic segments of the path with a single `page.tsx` file. We achieve this by adding an ellipsis before the name of the dynamic segment.

```js
app/
└── blog/
    └── [...slug]/
        └── page.tsx
```

Parameters in the path will be passed to the file in the following way:

```js
example url: `/blog/3`
params: { slug: ['3'] }

example url: `/blog/frontend/2`
params: { slug: ['frontend', '2'] }

example url: `/blog/frontend/react/4`
params: { slug: ['frontend', 'react', '4'] }
```

Here's an example of the Catch-all Segment component with simplified handling of `slug`, assuming that the last segment of the path is the page number for pagination:

```js
// src/app/blog/[...slug]/page.tsx

export default function ArticleList({
    params,
}: {
    params: Promise<{ slug: string[] }>;
}) {
  	const slug = (await params).slug
    let currentPage;

    slug.forEach((segment, index) => {
        if (index + 1 === slug.length && typeof segment === 'number') {
            currentPage = segment;
        } else {
            // Category and subcategory handling
        }
    });

    // ...
}
```

## Optional catch-all segments{id}

In the example above, we assume that a sub-page is displayed only if the final segment is a page number, so the default blog page would have the path `/blog/1`. In this case, the path `/blog` would return an error indicating that the page was not found.

If you want the `/blog` path to display the default list of articles on the first page of pagination, you can use **Optional Catch-all Segments** by adding extra square brackets to the dynamic segment.

```js
app/
└── blog/
    └── [[...slug]]/
        └── page.tsx
```

At the moment, `page.tsx` also handles the `/blog` path without any parameters (by default showing the first page of pagination).

```js
// src/app/blog/[[...slug]]/page.tsx

export default function ArticleList({
    params,
}: {
    params: Promise<{ slug?: string[] }>;
}) {
	const slug = (await params).slug
    let currentPage = 1;

    slug?.forEach((segment, index) => {
        // ...
    });

    // ...
}
```

Request a free Next.js consultation{contactBox}Facing technological challenges? Contact us for a free consultation in just 1 step!

## Generating static pages{id}

Dynamic pages are generated by fetching data from the backend. In the case of the Next.js framework, this is achieved by creating an asynchronous server component `page` and fetching data using the `fetch` API. Since the component renders on the server side, the request is made directly within the component body.

```js
// src/app/blog/[category]/[subcategory]/page.tsx

export default async function ArticleList({
	params,
}: {
	params: Promise<{ category: string; subcategory: string }>;
}) {
  	const category = (await params).category
   	const subcategory = (await params).subcategory 

    const articles = await fetch(
		`[...]/articles?category=${category}&subcategory=${subcategory}`,
	).then((res) => res.json());

	// ...
}
```

In this case (excluding Next.js caching mechanisms, which you can read about [here](https://nextjs.org/docs/app/building-your-application/caching{nofollow})), the request to the backend will be made each time a user requests our page. Therefore, the user will have to wait until the page renders on the server side to receive clean HTML with the page content.

To avoid this waiting time, we can use the **static site generation** method to render the subpage not on user demand, but at the time of building the application. With this method, the server will already have pre-rendered HTML files, and the user will not experience delays related to server-side requests.

To achieve this, we need to implement the `generateStaticParams` function. We can do this in the `page.tsx` or `layout.tsx` file:

```js
// src/app/blog/[category]/[subcategory]/page.tsx

export function generateStaticParams() {
	return [
		{ category: "frontend", subcategory: "next-js" },
		{ category: "frontend", subcategory: "react" },
		{ category: "frontend", subcategory: "framer-motion" },
		{ category: "backend", subcategory: "php" },
		{ category: "backend", subcategory: "node-js" },
	];
}

export default async function ArticleList({
	params,
}: {
	params: Promise<{ category: string; subcategory: string }>;
}) {
	// ...
}
```

Above, we defined an array of objects with `category` and `subcategory`. During the build, they will be passed as `params` to the `ArticleList` component, and then fetched via the API to generate 5 pre-rendered HTML files.

### GENERATING ONLY PART OF THE PAGES

If there are other categories not included in the explicitly defined parameters above, they will be rendered server-side on demand, just as when `generateStaticParams` is not used.

However, if we want to limit the number of subpages to only the 5 defined above, we can use a special route segment configuration option called `dynamicParams`, which makes any parameters outside those generated by `generateStaticParams` return a 404 error.

```js
// src/app/blog/[category]/[subcategory]/page.tsx

export const dynamicParams = false;

export function generateStaticParams() {
	// ...
}
```

### ASYNCHRONOUS generateStaticParams

If we want to generate static parameters on the server side using dynamic data from the backend, we can use `generateStaticParams` as an asynchronous function:

```js
// src/app/blog/[category]/[subcategory]/page.tsx

export async function generateStaticParams() {
	const subcategories = await fetch(`[...]/subcategories`).then((res) =>
		res.json(),
	);

	return subcategories.map((subcategory) => {
		return {
			category: subcategory.parent.slug,
			subcategory: subcategory.slug,
		};
	});
}

// ...
```

A downside of this approach – especially with a large number of subpages – can be a long build time. The Next.js creators addressed this by reducing compilation time through intelligent data fetching. Requests in `generateStaticParams` are [automatically memoized](https://nextjs.org/docs/app/building-your-application/caching#request-memoization{nofollow}), meaning that requests with the same arguments in different `generateStaticParams` will only be executed once.

### generateStaticParams IN LAYOUT

Optionally, `generateStaticParams` accepts parameters returned from `generateStaticParams` invoked in a parent component. Importantly, this function is executed in the child component for each parameter generated in the parent.

Let’s consider a hypothetical situation where we want to create a layout with a different primary color depending on the category. In the page for the list, we want to fetch articles filtered by subcategories. In this case, we can split the parameter generation into two places.

In `layout.tsx`, we fetch the categories:

```js
// src/app/blog/[category]/layout.tsx

export async function generateStaticParams() {
	const categories = await fetch(`[...]/categories`).then((res) =>
		res.json(),
	);

	return categories.map((category) => {
		return {
			category: category.slug,
		};
	});
}

export default async function Layout({
	params,
}: {
	params: Promise<{ category: string }>;
}) {
	const category = (await params).category

    const color = COLORS[category];

	// ...
}
```

In `page.tsx`, for the subcategories, we fetch articles for the list using the categories that were previously generated:

```js
// src/app/blog/[category]/[subcategory]/page.tsx

export async function generateStaticParams(params: { category }) {
	const subcategories = await fetch(
		`[...]/subcategories?category=${category}`,
	).then((res) => res.json());

	return subcategories.map((subcategory) => {
		return {
			subcategory: subcategory.slug,
		};
	});
}

export default async function ArticleList({
	params,
}: {
	params: Promise<{ category: string; subcategory: string }>;
}) {
	// ...
}
```

## Conclusion{id}

The article discussed basic conventions as well as more advanced techniques for working with dynamic routes in Next.js 15. Understanding this topic and leveraging Next.js routing capabilities allows for building scalable web applications and complex websites. By using methods to generate dynamic subpages at build time, we can significantly improve loading times and enhance SEO.

# **Next.js 15: Dynamic routes and Static Site Generation (SSG)**

## Explore Next.js dynamic routing and Static Site Generation (SSG) through practical examples.

large_art.png

medium_art.png

small_art.png

thumbnail_art.png

art.png

Intro

Defining dynamic routes

Catch-all segments

Optional catch-all segments

Generating static pages

Conclusion

Next.js 15: Dynamic routes and Static Site Generation (SSG)

# **Next.js 15 has been officially released!**
## Unveil the latest features of the most popular JS framework Next.js 15 - learn about Turbopack, enhanced caching, and more.

large_next15hero.png

medium_next15hero.png

small_next15hero.png

thumbnail_next15hero.png

next15hero.png

Stable in Next 15

Improvements

Breaking changes

Experimental features

Next.js 15 has been officially released!

## Overview{overview}

**Are you wondering how to quickly and affordably create a mobile app for Android and iOS based on an existing web app? With Ionic, this is possible in just a few hours! Ionic is a versatile technology that allows developers to quickly create mobile apps for various platforms. Its main advantage is the ability to easily deploy apps for both Android and iOS from a single codebase. With ready-made solutions commonly used in mobile apps, Ionic simplifies the app development process, requiring only knowledge of HTML, CSS, and JavaScript, along with familiarity with frameworks like Angular, React, or Vue.**

## How Ionic works{id}

Ionic builds the user interface using web components such as buttons, text fields, and lists, which are then rendered in the user's browser. By using Cordova or Capacitor, Ionic packages the app as a native mobile app, enabling access to device features like the camera, location services, and notifications.

Request a free Ionic consultation{contactBox}Facing Ionic challenges? Contact us for a free consultation in just 1 step!

## Integrating Ionic into existing projects{id}

Let's start by creating a React project:

```js
npm create vite@latest my-react-app -- --template react

cd my-react-app

npm install
```
Add Capacitor to the project:

```js
npm install --save-dev @capacitor/cli

npx cap init
```
Enter project name and bundle id, and then a conﬁguration file will be generated.

![config view](/uploads/capacitor_config_2d9207897b.png)

Add Android and iOS platforms:

```js
npm install @capacitor/core @capacitor/ios @capacitor/android

npm run build

npx cap add ios

npx cap add android
```
With these steps, the project now supports both Android and iOS platforms. Now we can run our project.

```js
npx cap open android
```
![editor view](/uploads/vscode_71d6310744.png)

Implementing Live Reload for Enhanced Development

To streamline the development process, integrate live reload functionality:

```js
npm install -g @ionic/cli native-run

ionic init
```
Add the following scripts to the package.json file:

```js
  "scripts": {
       "android": "ionic cap run android -l --external",
       "ios": "ionic cap run iOS -l --external",
  },

npm run android
```

Now, any code changes will trigger automatic application refresh.

## Using native features{id}

Once the app is running in a native environment, you can access native device features. For example, to use the camera:

```js
npm install @capacitor/camera

npx cap sync
```
Modify the AndroidManifest.xml file to grant necessary permissions for camera usage.

```js
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

        ...

        

        <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</manifest>
```

Then, implement the camera functionality in the code:

```js
import "./App.css";
import { Capacitor } from "@capacitor/core";
import { Camera, CameraResultType } from "@capacitor/camera";
import { useState } from "react";



function App() {
     const [imageUrl, setImageUrl] = useState("");

     const takePicture = async () => {
          const image = await Camera.getPhoto({
               quality: 90,
               allowEditing: false,
               resultType: CameraResultType.Uri,
          });
          setImageUrl(image.webPath);
     };

     return (
          <div className="App">
               <p>My Ionic app</p>

               {Capacitor.getPlatform() !== "web" && (
                    <button onClick={takePicture}>Open camera</button>
               )}

               {!!imageUrl && (
                    <img
                         style={{
                              width: "100vw",
                              height: 300,
                              backgroundColor: "red",
                              marginTop: 50,
                         }}
                         src={imageUrl}
                         alt={""}
                    />
               )}
          </div>
     );
}

export default App;
```
![three images with result](/uploads/three_device_b48ac2927b.png)

This enables seamless integration of native features into the application.

## Evaluating Ionic's applicability{id}

While Ionic excels in rapid development, it may not be optimal for complex projects compared to alternatives like React Native. However, for time-sensitive projects with budget constraints, Ionic emerges as an efficient solution.

## Summary{id}

Ionic is a powerful tool that simplifies mobile app development. With a rich repository of plugins for native feature implementation and support from an active community, Ionic is an ideal solution for novice mobile app developers. It offers a simple and fast pathway to creating apps available on multiple platforms. With Ionic, you can create a mobile app based on a web app in just a few hours, making it an excellent solution for projects with limited budget and time.

# **How to create a mobile app from a web app in just a few hours**
## An affordable and swift way to develop a mobile app with Ionic.

large_ionic-hero.png

medium_ionic-hero.png

small_ionic-hero.png

thumbnail_ionic-hero.png

ionic-hero.png

How Ionic works

Integrating Ionic into existing projects

Using native features

Evaluating Ionic's applicability

How to create a mobile app from a web app in just a few hours

## Overview{overview}

**On the 16th of May, during the React Conf 2024 conference, Olivier Tassinari from the MUI team delivered a presentation titled ["Pigment CSS, CSS in the server component age."](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=21694s{nofollow}) In our article, we would like to delve into the topic of this library, which, although still in development, will officially debut in the new version of Material UI v6.**

Developers creating applications with React typically utilise CSS-in-JS tools such as styled-components or Emotion for styling components. Both libraries focus on enhancing developer experiences by adding automatic prefixes (to improve compatibility with various browsers), providing style isolation, and improving code readability and debugging through self-generated component names.

As we know, technology is constantly evolving. Not long ago, we experienced the official release of Next.js 14, and for almost a month now, we've been familiarising ourselves with the beta version of React 19. Both in the new versions of Next.js and React, directives have been added, which we wrote about in our article [React 19 has been officially announced!](https://devanddeliver.com/blog/frontend/react-19-has-been-officially-announced) Aforementioned directives allow for generating components on the server or in the client (browser) side. Unfortunately, components styled using styled-components or Emotion are not compatible with server-side components. It is precisely this aspect, among others, and the desire to improve the performance of Material UI that prompted the creators to develop Pigment CSS library.

## What is Pigment CSS{id}

Pigment CSS is a zero-runtime CSS-in-JS library that offers support for [Next.js](/technologies/next-js) and Vite. In the future, there are plans to extend support to other bundlers. It serves as an alternative to Emotion and styled-components, characterised by its zero-runtime solution. But what exactly is CSS-in-JS? It's an approach to styling [web applications](/services/web-app-development) that involves writing CSS in JavaScript. Developers don't create separate CSS files; instead, they define styles directly in JavaScript code.

The goal of Pigment CSS creators is to shift the CSS processing time to build time. Compared to styled-components and Emotion, Pigment CSS aims to enhance DX (Developer Experience) by significantly improving performance and supporting the use of server components. However, nothing comes for free - this enhancement comes at the cost of increased compilation time.

The creators are aware of the number of projects built using styled-components and Emotion, so they have set themselves the goal of facilitating migration to the new tool. Especially in the case of transitioning from previous versions of Material UI based on Emotion to version v6, where Pigment CSS will be the standard. As the authors mention in their blog, working with RSC forced them to abandon familiar [API interfaces](/services/backend-and-api-s), such as "useContext," which was used by Emotion, among others.

## WyW-in-JS{id}

Pigment CSS is built on top of WyW-in-JS (Whatever you want in JS). It's a toolkit that allows you to create your own CSS-in-JS libraries based on Zero-Runtime. It's worth noting that the tool is continuously evolving. WyW-in-JS provides developers with a comprehensive set of tools to create their own solutions with custom syntax and functionalities. The tool offers modules and plugins for popular packages such as Vite, Svelte, or Webpack, as well as the Next.js framework, ensuring compatibility with various compilation systems. It allows the use of any JavaScript in style definitions, loops, and conditions, as well as supports function calls and object literals, and tagged templates (a function that allows you to create template literals). You can find more information in [WyW-in-JS documentation](https://wyw-in-js.dev/{nofollow}).

## Pigment CSS in practice{id}

### Creating variants

Variants are a way to parameterise styles in Pigment CSS. It consists of an array of objects, where each object has `props` and `style`. Styles are applied to a given component when its props match the props object. Below is an example of a button that has a prop called `size`:

```tsx
import { styled } from "@pigment-css/react";
 
export const ButtonWithVariants = styled("button")<{
    size: "default" | "small" | "large";
}>({
    backgroundColor: "transparent",
    border: "3px solid whitesmoke",
    borderRadius: "3px",
    color: "whitesmoke",
    cursor: "pointer",
    fontSize: "14px",
    outline: "none",
    overflow: "hidden",
    transition: "color 0.5s, transform 0.2s, background-color 0.2s",
    "&:hover": {
        backgroundColor: "whitesmoke",
        color: "#000000",
    },
    variants: [
        { props: { size: "default" }, style: { padding: "20px 30px" } },
        { props: { size: "small" }, style: { padding: "12px 18px" } },
        {
            props: { size: "large" },
            style: { fontSize: "18px", padding: "24px 34px" },
        },
    ],
});
 
export const PigmentVariantsExample = () => (
    <div
        className={css({
            alignItems: "center",
            display: "flex",
            flexDirection: "column",
            gap: "20px",
        })}
    >
        <ButtonWithVariants size="small">Small button</ButtonWithVariants>
        <ButtonWithVariants size="default">Default button</ButtonWithVariants>
        <ButtonWithVariants size="large">Large button</ButtonWithVariants>
    </div>
);
```
[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fapp%2Fexamples%2FPigmentVariants.tsx%3A19%2C14{nofollow})

### Using CSS Selectors and overriding

CSS selectors are available as keys in the `css` and `styled` objects. Here are a few examples:

```tsx
import { styled } from "@pigment-css/react";
 
const Text = styled("span")({
    fontSize: "16px",
});
 
export const Button = styled("button")({
    //...
    "&:hover": {
        color: "#000000",
    },
    "&::after, &::before": {
        borderRadius: "3px",
        content: '""',
        height: "100%",
        left: 0,
        position: "absolute",
        top: 0,
        width: "100%",
    },
    "&::before": {
        border: "3px solid #14b8a6",
        transition: "opacity 0.3s",
    },
    "&:hover::before": {
        opacity: 0,
    },
    //...
    [`${Text}`]: {
        fontSize: "14px",
    },
});
 
export const PigmentCssSelectors = () => (
    <div>
        <Button>
            <Text>Button</Text>
        </Button>
    </div>
);
```
[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fapp%2Fexamples%2FPigmentCssSelectors.tsx%3A3%2C1-5%2C4{nofollow})

Additionally, Pigment CSS supports overriding previously created components:


```tsx
const OverrideButton = styled(Button)({
    color: "#E3A008",
    "&::before": {
        border: "3px solid #E3A008",
    },
    "&::after": {
        backgroundColor: "#E3A008",
    },
});
```

### Usage of media queries

Pigment CSS provides support for creating media queries in both `css()` and `styled()`.

```tsx
import { css, styled } from "@pigment-css/react";
 
const boxStyles = css({
    color: "#ffffff",
    textAlign: "center",
    "@media (max-width: 768px)": {
        color: "#5145CD",
    },
});
 
const Title = styled("h1")({
    fontSize: "32px",
    "@media (max-width: 768px)": {
        fontSize: "24px",
    },
});
 
export const PigmentMediaQueriesExample = () => (
    <div className={boxStyles}>
        <Title>Pigment media queries example</Title>
    </div>
);
```

[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fapp%2Fexamples%2FPigmentMediaQueries.tsx%3A11%2C29{nofollow})

### Animations using CSS keyframes

To create a reusable animation, we need to use the keyframes function. Calling this function is replaced by a unique animation name, which we can then place in the animation property.

```tsx
import { styled, keyframes } from "@pigment-css/react";
 
const circle = keyframes({
    "0%": {
        transform: "rotate(0deg)",
    },
    "100%": {
        transform: "rotate(360deg)",
    },
});
 
const motion = keyframes({
    "0%": {
        transform: "rotate(45deg)",
    },
    "100%": {
        transform: "rotate(405deg)",
    },
});
 
const Ring = styled("div")({
    position: "relative",
    background: "transparent",
    border: "3px solid #3c3c3c",
    borderRadius: "50%",
    color: "#60a5fa",
    height: "100px",
    width: "100px",
    "&::before": {
        animation: `${circle} 1.5s linear infinite`,
        border: "3px solid transparent",
        borderRadius: "50%",
        borderRight: "3px solid #38bdf8",
        borderTop: "3px solid #38bdf8",
        content: '""',
        height: "calc(100% + 6px)",
        left: "-3px",
        position: "absolute",
        top: "-3px",
        width: "calc(100% + 6px)",
    },
});
 
const Progress = styled("span")({
    animation: `${motion} 1.5s linear infinite`,
    background: "transparent",
    display: "block",
    height: "4px",
    left: "50%",
    position: "absolute",
    top: "calc(50% - 2px)",
    transformOrigin: "left",
    width: "50%",
    "&::before": {
        background: "#60a5fa",
        borderRadius: "50%",
        content: '""',
        height: "16px",
        position: "absolute",
        right: "-8px",
        top: "-6px",
        width: "16px",
    },
});
 
export const PigmentAnimationKeyframes = () => (
    <Ring>
        <Progress />
    </Ring>
);
```

[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fapp%2Fexamples%2FPigmentAnimationKeyframes.tsx{nofollow})

### Component based on runtime values

Sometimes, we'll need styling based on values at runtime. For instance, when the value is based on user actions or is unknown because it's fetched from the backend. We have two ways to achieve this.
The first is to use CSS variables directly in the `style` attribute:

```tsx
const Count = styled("span")({
    color: "var(--color)",
    fontSize: "24px",
    transition: "color 0.5s",
});
 
const Counter = () => {
    const [color, setColor] = useState("white");
 
    return (
        //...
            <Count style={{ "--color": color } as CSSProperties}>{state}</Count>
        //...
    );
};
```

[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fapp%2Fexamples%2FPigmentRuntimeValues.tsx{nofollow})

The second method is to use a callback function for a specific CSS property. It's worth mentioning here that in this case, Pigment CSS replaces the callback with a CSS variable and injects the value using inline styles.

```tsx
const Box = styled("div")<{ color: string }>({
    alignItems: "center",
    border: ({ color }) => `3px solid ${color}`,
    display: "grid",
    gap: "24px",
    gridTemplateColumns: "auto 50px auto",
    justifyItems: "center",
    padding: "20px",
    transition: "border 0.5s",
});
 
const Counter = () => {
    const [color, setColor] = useState("white");
 
    return (
        <Box color={color}>
            {/* ... */}
        </Box>
    );
};
 
// Result
 
.by953dt {
    //...
    border: var(--by953dt-0);
}
 
<div
    style={{
        "--by953dt-0": `3px solid ${color}`;
    }}
>
    Hello
</div>
```

### Theming

Theming is an optional feature that allows for the reuse of the same values, such as design tokens. Examples include colour palettes, typography or spacing. It's a simple object with any structure that we define in a configuration file. It's worth emphasising that the theme is added during the build and does not exist in the compiled JavaScript file. This allows us to benefit from theming in React Server Components.

An example of using theme in Next.js looks like this:


```tsx
/** @type {import('next').NextConfig} */
const nextConfig = {};
 
module.exports = withPigment(nextConfig, {
    theme: {
        colors: {
            primary: "#2563eb",
            secondary: "#8b5cf6",
        },
    },
});
```

Access to the theme in the component is achieved through a callback which can be used with both `styled()` and `css()`:

```tsx
import { styled } from "@pigment-css/react";
 
const Title = styled("h2")(({ theme }) => ({
    color: theme.colors.secondary,
    fontSize: "24px",
}));
 
export const PigmentTheme = () => {
    return (
        <div>
            <Title>Themed title</Title>
        </div>
    );
};
```

[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fapp%2Fexamples%2FPigmentTheme.tsx%3A15%2C1{nofollow})

Pigment CSS provides us with a special utility called `extendTheme` which adds several features to our theme. One of them is generating the `vars` object, which contains tokens as references to CSS variables. Additionally, in the example below, `cssVarPrefix` has been used. It allows customising the name of CSS variables by adding a prefix.

```tsx
/** @type {import('next').NextConfig} */
const nextConfig = {};
 
const theme = extendTheme({
    cssVarPrefix: "pigment-example",
    colors: {
        primary: "#2563eb",
        secondary: "#8b5cf6",
    },
});
 
console.log(theme.colors.primary); // #2563eb
console.log(theme.vars.colors.primary); // var(--pigment-example-colors-primary)
 
module.exports = withPigment(nextConfig, { theme });
```

[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fnext.config.js%3A19%2C4{nofollow})

To use type checking for the theme, you need to extend the type ThemeArgs:

```tsx
import type { ExtendTheme } from "@pigment-css/react/theme";
 
declare module "@pigment-css/react/theme" {
    interface ThemeTokens {
        colors: {
            primary: string;
            secondary: string;
        };
    }
 
    interface ThemeArgs {
        theme: ExtendTheme<{
            colorScheme: "light" | "dark";
            tokens: ThemeTokens;
        }>;
    }
}
```

[CodeSandbox example](https://codesandbox.io/p/devbox/pigment-css-examples-jtv65x?file=%2Fpigment.d.ts{nofollow})

## Our conclusions{id}

Despite being in the early stages of development (currently 0.0.11), the Pigment CSS library is gaining popularity. This can be observed by tracking the increasing number of [downloads of the tool](https://www.npmjs.com/package/@pigment-css/react{nofollow}) from week to week. A huge advantage is that the tool was/is created by the developers of Material UI, which is downloaded millions of times each week. Therefore, there is definitely no reason to worry about support and development of the new library. Developers who have had the opportunity to download the library regularly report issues, which are analysed and addressed in subsequent releases. What we like the most is the emphasis on a well-thought-out migration from Emotion, which will not be as troublesome as it might have initially seemed. Programmers who have been using styled-components or Emotion so far will not have major issues switching to Pigment CSS because they are familiar with the main functions used to define styles (`styled()` and `css()`). At this point, the library has plugins for Next.js and Vite, as well as TypeScript support.

Referring to a blog post from Material UI, in which the creators tested the same application built on Next.js using Emotion and Pigment CSS, a significant difference in favour of Pigment CSS was observed:


- 20% reduction in first load JavaScript (104 kB vs. 131 kB)
- 15% reduction in Time To First Byte (381.5 ms vs 447.5 ms)
- 9% decrease in First Contentful Paint (455 ms vs. 503 ms)
- 7.5% reduction in page HTML (14.7 kB vs. 15.9 kB)

## Summary{id}

With the emergence of server components, there is a need to build new styling tools that can fully leverage the potential associated with performance improvements by shifting the rendering process of user interfaces to the server. Most existing tools struggle with this issue because their operation occurs on the client side.

In this article, we discussed one of the solutions to the server-side rendering problem, namely Pigment CSS from Material UI. Additionally, we built several examples using the mentioned library, discussed the migration process from Emotion to Pigment CSS, and shared our conclusions. Of course, there are other tools that support RSC, such as Tailwind CSS, Panda CSS, or StyleX. What sets them apart from Pigment CSS is the fact that they use atomic class names, which can make debugging code more challenging.

Whether the new library from Material UI will gain interest comparable to styled-components or Emotion remains to be seen later this year when it debuts alongside Material UI v6.

Interested in more? [Dev and Deliver](/) specializes in innovative solutions such as this one. Keep an eye for more articles from the field of Next.js and React.



# **Pigment CSS - new library from Material UI**
## First look at a new zero-runtime CSS-in-JS library from Material UI with examples

large_pigment.png

medium_pigment.png

small_pigment.png

thumbnail_pigment.png

pigment.png

Overview

What is Pigment CSS

WyW-in-JS

Pigment CSS in practice

Our conclusions

Pigment CSS - new library from Material UI

## Overview{overview}

**Since the release of React 18, almost 2 years have passed. Version 18 was available for download at the end of March 2022, and for many developers, it was a breakthrough version, mainly due to the significant performance improvements compared to previous versions of the library. That was when we got Concurrent Rendering Mode in React, which enabled concurrent rendering. Why is this worth mentioning? Because in this mode, we gained options for pausing, suspending, and resuming, as well as completely abandoning rendering, which was a breakthrough moment. With the help of concurrency mechanisms such as useDeferredValue, startTransition, or Suspense, we could defer the update of parts of the user interface, update the state without blocking the user interface, and display an optional component while waiting for data retrieval.**

**Before we get to the main part of the article, it is worth mentioning that [React Conf 2024](https://conf.react.dev/{nofollow}) will take place soon, on May 15-16 in Henderson, Nevada, and will be available online. The official React website also states that the next library update (currently 18.2.0) will be a major version, namely React 19. We do not yet know the official release date, but in this article, we will try to explore the innovations that await us in the announced version.**

## React compiler{id}

The basic idea of React is that developers define the user interface as a function based on the current state. When the state changes, React re-renders the component. However, there are situations where React is too reactive and renders the component too many times. An example could be creating a new array or object in each component render. Even though the array or object may have the same values, React will re-render the view. To deal with such situations, developers used useMemo and useCallback.

Although this solution served its purpose, it cluttered the code, making it easier to make mistakes. Maintaining such code required additional effort from the programmer.

The React team worked on a solution and decided that the answer to this problem should be a compiler that automatically renders user interface components precisely based on state changes. As a result, developers won't have to remember to use useMemo and useCallback because React will intelligently render only the necessary parts of the user component when necessary.

The React Compiler should be able to safely compile code for performance based on knowledge of JavaScript and React rules. We know that React components must be idempotent - return the same value for the same input - and cannot change properties or state values. This is intended to improve the quality of rendering, which translates into the speed of the application.

Not so long ago, the mentioned compiler was only a research project, but it is now used in the production version of Instagram. The React team mentioned that work is underway to prepare the first open-source version and to extend the compiler to other Meta products.

Request a free React consultation{contactBox}Facing React challenges? Contact us for a free consultation in just 1 step!

## Actions{id}

Actions are a new way to deal with forms. An action is a function that can be both synchronous and asynchronous, so it can be defined on the client side using JavaScript or on the server using the 'use server' directive. React provides two hooks: useFormState, which will be used to update the state after the form action result, and useFormStatus, which will provide information about the status of the last form submission.

An example use of action:

```js
<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>
```

By default, actions are sent within a transition – this means that the page where the form is located is interactive during action processing. As mentioned above, actions support asynchronous functions, so we can use async/await in them. Additionally, developers can display a pending interface when an asynchronous request begins, such as data retrieval. This is done using the isPending state.

In this context, it is worth mentioning useOptimistic. This is a hook that allows showing a different state when an asynchronous action is in progress.

Below is the code from the documentation:

```js
import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}
```

To better visualize the useOptimistic function, let's use an example. Imagine that we are traveling by train and we have a weak internet connection. We are browsing our shopping cart on a website and have decided that we would like to change the quantity of one of the items being purchased. By clicking on the plus icon, the quantity of the given product in the cart will first increase, and then the cart value will be updated (so the user will get the effect they would have with faster internet and faster action processing). When the asynchronous action is executed, we then update the cart state and the quantity of products with data from the server. In the event of a successful action, the overall cart value and the number of products will not change, whereas in case of an error, the mentioned information will be reverted to the previous state (before clicking on the icon increasing the quantity of products in the cart).

## Directives{id}

In this section, we will present new directives that will be added as a result of the React library update.

**'use client'** – a directive that indicates that the interface will be interactive. In this case, instead of HTML code, the server returns JavaScript code. The code returned by the server contains information about how the HTML code should be generated by the browser. What does an interactive interface mean? It means that we allow the component to change its state, and the user can trigger an action (onClick, onChange) when, for example, clicking on a component element. However, this negatively affects the bundle size, so the browser will need more time to load the page or application. The directive is added at the beginning of the file, above the imports. It is also worth noting that all components used in the file with this directive are treated as part of the client package, even those server-side components mentioned below.

Good examples describing the use of the above directive are:

- filter buttons
- product add-to-cart buttons with counters
- cart price update
- various animations

**'use server'** - a directive indicating that the code will be rendered on the server side. Unlike client components, server components do not affect the size of the bundle downloaded by the browser, which means they do not slow down the application. Server components are perfect for non-interactive components. Their advantage is that they can be asynchronous functions, so we can - within the component - directly connect to the database and retrieve data from it. Another advantage of server components is security, since sensitive data and logic can be kept on the server side. If we don't need interactive components with states on the server side, we can generate the entire HTML code of the page, allowing for a quick preview of the content.

Good examples describing the use of the above directive are static elements on the page such as:

- navigation
- sidebar
- footer with links
- product pages

The latter can be generated together with the image and details on the server side and returned to the user. 

## Document metadata{id}

By metadata, we mean, among other things:

- page title
- page description
- keywords
- author
- copyright

These are pieces of information contained in the `<title>` and `<meta>` tags of our page.

There are pages and applications where one metadata is sufficient, e.g. a company information page. In a case of a store we need different metadata; for each product, metadata can - and even should - be different. HTML tags for metadata must be placed in the `<head>` document, which is usually rendered in the component in the main directory of the application. In such cases, there was a problem of how to change them. One technique to solve this problem was to render a special component that moves the `<title>` `<meta>` tags to `<head>`. In the new version of React, we will be able to edit `<title>`, `<meta>`, `<link>` from anywhere in the component tree. Additionally, this method has been unified, and it will work identically in client, server, and Server Side Rendering components.

## Asset loading and data fetching{id}

From the latest information, it follows that React 19 will provide faster image and other files loading. When a user browses the current page, React will load images and scripts in the background, resulting in shorter waiting times when switching to another page.

By default, browsers load style sheets, images, and fonts independently, which can lead to jumping user interface elements when individual resources are being retrieved. At this point, it is worth mentioning Suspense again, which allows specifying what should be displayed as a fallback when data from the [API](/services/backend-and-api-s) or component code are still being loaded. In React 19, Suspense has been integrated with the resource loading cycle (style sheets, images, fonts) in such a way that React takes them into account to determine whether the content is ready to display the component. This is intended to solve the problem mentioned above.

New [API interfaces](https://react.dev/reference/react-dom#resource-preloading-apis{nofollow}) have been introduced as well. Here, we mention preload and preinit, which increase control over resource loading.

## Other changes{id}

Finally, we would like to mention changes compared to the previous version of the React library:

- **forwardRef** - will become a regular property named ref, which can be passed down through component hierarchies.
- **use(Promise)** - the component calling use is suspended while the promise passed to use awaits resolution. If the component calling use is "wrapped" in Suspense, a fallback will be displayed until the Promise is resolved.
- **use(Context)** - replaces useContext. It works the same as the mentioned hook, but additionally, it can be called in conditional functions and loops. This is a big step towards optimization because it will be possible to conditionally skip component rendering even if the context has changed.
- **<Context.Provider>** - will be replaced by <Context>, which is intended to be more intuitive to use. It is used to "wrap" components using context.

## Summary{id}

There is no doubt that the React library is evolving. With each new release, the React team helps developers significantly in their work. Moreover, it improves the overall experiences of users who use applications created using this library. The mechanisms proposed by [React developers](/technologies/react) show the direction of development chosen by the creators. We see a lot of emphasis on optimization and application rendering speed.

Functionalities that we could use in previous versions of React are being developed and moving into stable mode. Additionally, new hooks give developers new possibilities when creating applications. The React team also tries to provide ready-made solutions to problems, such as those described in the Document metadata or Asset loading and Data fetching sections.

Although we received information about what to expect in the new version of the React library, we still need to be patient and wait for the official version, which may be released later this year.

Ready to start your own React adventure? Or are you still having some doubts? No worries! Contact us and we will help you incorporate React into your product. Trust an experienced [software development company](/).






# **React 19 has been officially announced!**
## Discover exciting new features that can revolutionize your app development process.

large_react.png

medium_react.png

small_react.png

thumbnail_react.png

react.png

React compiler

Actions

Directives

Document metadata

Asset loading and data fetching

Other changes

React 19 has been officially announced!

## Overview{overview}

**Next.js, developed by Vercel in 2016, is a powerful JavaScript framework used to create fast, responsive and SEO-friendly web applications, using the popular React library.**

**In this article, although Next.js 13 and 14 brought a lot of new features, I want to take a closer look on: custom routing, prefetching, differences between Server and Client Components, optimization tools, cache support, and the benefits of developer experience, SEO, and performance perspective. Additionally, I will provide a brief guide on how to install the latest version of Next.js so that you can leverage all the benefits mentioned in the article. Let's dive in!**

## Instalation{id}

How to install this awesome framework in the latest next version?
Here are the steps to create a new project:

- make sure you have a package manager installed, such as `npm` (included with Node.js by default) or `yarn`
- open your terminal or command prompt
- in the selected directory run the [Next.js](/technologies/next-js) project initialization command by typing: `npx create-next-app@latest`

This command will download the latest version of Next.js and create a new project in the current directory. During the initialization process, you'll see the following prompts:

```unrealscript
✔ What is your project named? … next-14 //default 'my-app'
✔ Would you like to use TypeScript? … No / Yes //default Yes
✔ Would you like to use ESLint? … No / Yes //default Yes
✔ Would you like to use Tailwind CSS? … No / Yes //default No
✔ Would you like to use `src/` directory? … No / Yes //default Yes
✔ Would you like to use App Router? (recommended) … No / Yes //default Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes //default No
✔ What import alias would you like configured? … @/* //if you choose 'yes' above the next default prompt will be '@/*'
```

Once the initialization process is complete, you can start your new project by typing: `npm run dev`. That's it! You now have a Next.js project set up and running on the latest version of the framework. You can start writing code and [developing your web application](/services/web-app-development).

As a developer, I highly suggest using TypeScript in your projects. It's super handy and helps catch bugs before they become big headaches. Also, don't forget about ESLint – it's keeps things tidy and error-free. Tailwind CSS is awesome for making your components look sleek, but if you don't know this tool, there are other cool tools like Styled-Components or [styling ways](https://nextjs.org/docs/app/building-your-application/styling{nofollow}) mentioned in the documentation. The src directory structure proves beneficial for project organization and ease of navigation. It is highly recommended that you select the Router app as suggested for installation. This choice ensures compatibility with Next.js' modern routing approach, thus optimizing the routing experience. While customizing default import aliases is not recommended by default, I think it saves loads of typing and makes your code look cleaner.

Request a free Next.js consultation{contactBox}Facing Next.js challenges? Contact us for a free consultation in just 1 step!

## How to manage routing{id}

Until the release of Next.js version 13, routing was based on the **Pages** directory. With the new version of Next.js, the **App Router** has been introduced, supporting shared layouts, nested routing, loading states, error handling, and more of React's latest features, such as Server Components and Streaming.

### App Router

In app directory, other folders define routes, and each folder in a route represents a route segment. Each route segment is mapped to a corresponding segment in a URL path.

Example of folder directory:

```bash
app
├── about
│   └── page.js
└── account
    └── settings
        └── page.js
```

See the result below:

![view of page url](/uploads/url_8432dd94fa.png)

Files like `page.js` are used to create UI for a route segment, but Next.js provides a set of special files to create UI with specific behavior in nested routes include:

- **layout**: create shared UI for a segment and its children
- **page**: as mention above, it creates a unique UI for a route to make routes publicly accessible
- **loading**: this file is responsible for creating the loading UI with [React Suspense](https://react.dev/reference/react/Suspense{nofollow}). It 
will automatically wrap the page.js file and all its nested components within a <Suspense> boundary
- **not-found**: it is UI for handling not-found cases for a segment and its children
- **error**: UI for handling errors for a segment and its children
- **global-error**: Global error UI
- **route**: Server-side [API](/services/backend-and-api-s) endpoint
- **template**: very similar to layouts, it is create a new instance when navigating between pages that use the same template
- **default**: Fallback UI for [Parallel Routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes{nofollow})

Special files are described in more detail in the in the [documentation](https://nextjs.org/docs/app/building-your-application/routing#file-conventions{nofollow}).

It is also worth mentioning that Next.js automatically handles important scenarios like Loading, Error, and Not-Found depending on where these files are located.

![view of components hierarchy](/uploads/hierarchy_9ce9e924fe.svg)

As seen in the image above [React](/technologies/react) components that are defined in special route segment files are always rendered in a specific hierarchy, and in the case of a nested route, the segment components will be nested inside the components of its parent segment.

In the **App Router**, the app  directory coexists with the pages  directory, which is a good approach, as it allows for a gradual migration between versions. However, it's important to note that the app  directory takes precedence over the pages directory, and naming folders the same way in both directories will result in a compilation error.

## Prefetching{id}

Prefetching in Next.js is an advanced mechanism that ensures faster and smoother transitions between pages by preloading data or resources in the background before they are actually needed by the user. It works as a kind of anticipation - the application predicts which resources will be needed in the future and loads them in advance. This way, when a user clicks on a link or navigates to a new page, the content is already loaded and ready to be displayed, eliminating delays and providing a seamless interaction.

In Next.js, routes can be prefetched using two methods:

- **<Link> Component**: Routes are automatically prefetched when they come into the user's viewport. This prefetching occurs either during the initial page load or when the route becomes visible through scrolling
- **router.prefetch()**: Another method involves using the useRouter hook to programmatically prefetch routes. This allows developers to have more control over when and which routes are prefetched

Prefetching in Next.js is a powerful tool that significantly improves the user experience by providing faster and more responsive application interfaces. Additionally, it gives developers the ability to optimize application loading by preparing resources in advance, resulting in user satisfaction and better SEO performance.

## Server vs Client Components{id}

Server Components and Client Components play a crucial role in determining how your application renders and delivers content to users. React and Next.js allow you to create hybrid web applications where parts of your code can be rendered on the server or the client. By default, Next.js uses Server Components. This allows you to automatically implement server rendering with no additional configuration. Here's a breakdown of each:

### Server Components

Server Components are rendered exclusively on the server-side. They are responsible for generating pre-rendered HTML, which is then sent to the browser. This approach eliminates the need for a large JavaScript bundle on the client-side, resulting in a smaller initial page load size. Server Components are ideal for delivering content that doesn't require dynamic updates or interactivity after the initial render. They contribute to improved performance and security by minimizing client-side processing. More about Server Components you can find in [documentation](https://nextjs.org/docs/app/building-your-application/rendering/server-components{nofollow}).

### Client Components

Client Components are rendered both on the server and the client. During the initial request, Client Components are rendered on the server and sent to the browser. Subsequently, for client-side navigations, these components are rendered only on the client. This process, known as "hydration," transforms the initially static markup into interactive content. Client Components are typically used for elements that require dynamic updates and interactivity, such as animations or user interactions. While they enhance the user experience, they may not directly impact SEO, as the core content is already defined in the server-rendered HTML.

To use Client Components, simply add the "use client" React directive at the very top of the file, before imports.

```js
'use client'

import { useState } from 'react'

... // the rest of your code
```

`“Use client”` is used to declare the boundary between the Server and Client Components modules. Please note that once a "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client package.

More about client component you can find in [documentation](https://nextjs.org/docs/app/building-your-application/rendering/client-components{nofollow}).

## Next.js built-in optimizations{id}

Next.js provides several built-in optimizations such as: 

- **code splitting**: The process of dividing an application's code into smaller packages that can be downloaded and run through a     
  browser.  Each chunk contains the code required for a particular page. This reduces the amount of data transferred and the 
  turnaround time for each request, leading to improved performance. 
- **image optimization**: With features like lazy loading and blur-up placeholders, the Image component ensures faster page loads 
and prevents layout shifts during image loading, enhancing visual stability. It supports both local and remote image sources, allowing for on-demand image resizing and customization. To use the Image component, simply import it and provide the image source. For local images, Next.js automatically determines the width and height, while for remote images, you need to specify these manually. Additionally, you can customize image loading priorities to optimize Largest Contentful Paint (LCP) performance.
- **image optimization**: With features like lazy loading and blur-up placeholders, the Image component ensures faster page loads and prevents layout shifts during image loading, enhancing visual stability. It supports both local and remote image sources, allowing for on-demand image resizing and customization. To use the Image component, simply import it and provide the image source. For local images, Next.js automatically determines the width and height, while for remote images, you need to specify these manually. Additionally, you can customize image loading priorities to optimize Largest Contentful Paint (LCP) performance.
- **font optimization**: eliminating external network requests and enhancing both performance and privacy. It facilitates self-hosting of fonts, including Google Fonts, ensuring zero layout shift and improved loading times. By importing fonts from `next/font/google`  and defining subsets and display properties, you can easily integrate Google Fonts into your application. Fonts are downloaded at build time and served from the same domain, reducing reliance on external requests. For local fonts, `next/font/local`  enables self-hosting by specifying the font source and display properties. Multiple font files for a single family can be managed efficiently, improving performance.

Using above optimizations improves application compilation performance. More about them under this [link](https://nextjs.org/docs/app/building-your-application/optimizing{nofollow}).

## Cache{id}

Cache in Next.js is a crucial mechanism that influences application performance and reduces costs by storing the results of rendering and data requests. There are four main caching mechanisms: request memoization, data cache, full route cache and route cache. Each of these mechanisms has its own purpose and impact on the application.

### Request Memoization

Request memoization allows for storing the results of fetch function calls, enabling reuse of the same data in different parts of the React component tree without the need for re-fetching. This is particularly useful when the same data is used in multiple areas of the application.

### Data Cache

The data cache in Next.js stores the results of data requests, allowing for their reuse across different user requests and application versions. It also enables configuring revalidation periods, allowing for data updates in the background.

Cached data can be revalidated in two ways, with:
- **Time-based Revalidation**: Revalidate data after a certain amount of time has passed and a new request is made. This is useful for data that changes infrequently and freshness is not as critical
- **On-demand Revalidation**: Data revalidation occurs in response to specific events, such as a form submission. On-demand revalidation can use a tag-based or path-based approach to revalidate groups of data at once. This is useful when you want to ensure the latest data is shown as soon as possible, particularly in scenarios like updating content from a headless CMS

### Full Route Cache

The full route cache in Next.js stores the results of rendering pages in memory, enabling fast serving of statically generated pages without the need for re-rendering on each request. This is a key optimization mechanism that speeds up page loading and reduces server load.

### Router Cache

This in-memory client-side cache stores the React Server Component Payload, split by individual route segments, for the duration of a user session. The Router Cache enhances navigation experiences by storing visited route segments and prefetching routes the user is likely to navigate to, based on <Link> components in their viewport.

>***Note:** It's also important to understand how caching mechanisms interact with each other and how they can be managed for optimal application performance. For example, data revalidation may affect other caching mechanisms, so conscious management of cache configuration in the application is crucial. You can read more about cache in the [documentation](https://nextjs.org/docs/app/building-your-application/caching{nofollow})*

## Conclusion{id}

Next.js 14 introduces powerful features and optimizations that enhance both developer experience and application performance. With its customizable routing system, advanced prefetching capabilities, and support for both Server and Client Components, Next.js offers a flexible and efficient solution for building modern web applications.

The introduction of the App Router streamlines navigation and layout management, making it easier to organize and maintain complex application structures. Prefetching mechanisms ensure smooth transitions between pages, improving [user experience](/services/product-and-ux-ui-design) and reducing loading times.

The distinction between Server and Client Components enables developers to fine-tune rendering strategies based on performance and SEO requirements. By leveraging built-in optimizations such as code splitting, image optimization, and font loading, developers can further optimize application loading times and user interaction.

Additionally, Next.js provides robust caching mechanisms to improve application performance and reduce server load. By intelligently caching data and rendered content, Next.js minimizes redundant network requests and enhances scalability.

Overall, Next.js continues to evolve as a leading framework for building fast, responsive, and SEO-friendly web applications. Its comprehensive feature set and focus on performance make it a valuable tool for developers seeking to deliver exceptional user experiences in today's competitive digital landscape.

Ready to start your own Next.js adventure? Or are you still having some doubts? No worries! Contact us and we will help you incorporate Next.js into your product. Trust an experienced [software development company](/).


# **Next.js 14: Exploring fundamental concepts**

## Boost your web app performance.

large_next.png

medium_next.png

small_next.png

thumbnail_next.png

next.png

Instalation

How to manage routing

Prefetching

Server vs Client Components

Next.js built-in optimizations

Cache

Next.js 14: Exploring fundamental concepts

## Introduction{overview}

**In this article, you will learn what accessibility is and why we shouldn't forget about it. You will also find out about the guidelines of the Web Content Accessibility Guidelines (WCAG) - a set of rules for creating user-friendly websites for everyone. All guidelines can be found at this link: [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20{nofollow})**

## What is accessibility?{id}

If you work with websites, you have probably heard of accessibility and know that it is a term referring to the accessibility of a website to all users, including those who use the internet in a way that differs from the standard way. These users may include:

- People with visual impairments: blind or partially sighted individuals, individuals with color vision impairments,
- Deaf or hard-of-hearing individuals,
- Physically disabled individuals,
- Individuals with cognitive impairments.

Each of these individuals may browse our website differently, such as using screen readers, special keyboards, or only using a regular keyboard instead of a mouse. Therefore, a well-written and accessibility-focused website offers these users easy and unrestricted access to content, regardless of how they use it.

Request a free web development consultation{contactBox}Facing web development challenges? Contact us for a free consultation in just 1 step!

## WCAG 2.1 Standard{id}

The Web Content Accessibility Guidelines are a set of rules that make websites more user-friendly for people with disabilities.

According to WCAG principles, an accessible website should meet four criteria:

- **Perceivable:** the content should be presented in a way that is visible to all users.
- **Operable:** the interface should be easy to operate.
- **Understandable:** users should be able to understand the content and how to use the interface.
- **Robust:** the content should be adaptable to technology. The way content is displayed should be tailored to the device on which it is being displayed.


The degree to which these criteria are met can be assigned to the following levels of accessibility:

- **Level A** - the basic set of accessibility requirements.
- **Level AA** - the optimal implementation of standard requirements.
- **Level AAA** - the highest level of compliance with WCAG, which is difficult to achieve.


> *In Poland, a law has been introduced that requires every public entity to adapt its content to the WCAG 2.1 standard guidelines. Although the law only applies to public entities, an increasing number of people are beginning to pay attention to accessibility when creating websites.*

## Why is accessibility so important?{id}

As I mentioned earlier, not all users are able to use our website in the way we assume - most often with a mouse or simply a finger (on smartphones). If we do not enable such users to navigate the site and browse its content easily, they are likely not to visit it again. And we wouldn't want that, would we?

![senior-women](/uploads/accessibility_user_c7597ac7bc.png)

Taking care of correct website accessibility also has other advantages and positively affects the user experience. For example, a user who normally uses a mouse suddenly does not have access to it and does not like touchpads, so they start navigating the site using the keyboard. If we have taken care of accessibility before, the user will not be disappointed.

**What should we pay attention to?**

### Semantic HTML

This is the foundation, use semantic HTML and do it well. Do not build a website on div tags alone. Show the browser where the navigation is, and where the sections, articles, or footer are. A user using a screen reader will be able to navigate the content of the page more easily.

### Font size

![fonts](/uploads/accessibility_fonts_404988a18d.png)

Do not use font sizes smaller than **12px** on your website, and ideally use **font-size: 16px**. It will be even better if you use the **'rem'** unit instead of **'px'** - the one that inherits the size from the highest element in the DOM tree, usually the HTML tag. If a person uses a larger font size on their device than the default one, thanks to using 'rem', the text on our website will be larger for that person.

### Focus

Do not remove default focus states, such as the outline for buttons. They help users navigate with a keyboard to see where they are.

### Color contrast

![contrast-palette](/uploads/contrast_5790c86b39.png)

The WCAG standard specifies maintaining a contrast ratio between text and background at a minimum of 4.5:1 or 7:1 if we want to meet the highest criterion (AAA). On this website [Contrast Checker](https://webaim.org/resources/contrastchecker{nofollow}), we can check color contrast.

### Buttons

Do not replace buttons with divs. Divs do not have a focus state, and as mentioned earlier, this is important from the perspective of a person navigating the site using a keyboard.

![buttons-meme](/uploads/accessibility_buttons_5d576e1518.png)

Use buttons to perform an action on the site, and if you want the user to go to another URL, simply use a link.

If your button has an icon instead of text, use **aria-label=""** to describe its action. This will make it easier for a blind person using a screen reader to understand the function of the button. For example:

```html
<button aria-label='Add to favorite' class='heart icon' />
 ```

### Images

Use the alt attribute to describe images, it will help a visually impaired person understand what the image represents. If the image serves a purely decorative function, you can leave the alt attribute empty alt=''.

### Headings

Use headings in order from **H1** to **H6**, remembering that there can be only one H1 heading on a page.

### Modals

Modals can be problematic for users of screen readers or other assistive technologies, so to make them more accessible, try to avoid them if possible. If you have to use them, remember to assign them the ```role="alertdialog"``` attribute and make sure the modal can be closed by pressing the ESC button.

## WAI-ARIA{id}

Web Accessibility Initiative - Accessible Rich Internet Applications, or WAI-ARIA for short, is a set of attributes that can be used in HTML as additional semantics to support assistive technologies and improve the accessibility of our website. WAI-ARIA is divided into sections:

- Roles - we determine what role a particular element plays, e.g. (as with modals above) ```role='alertdialog'```
- Properties - gives additional meaning to the element, e.g. ```aria-label='open page navigation'```
- States - describes the current state of the element, e.g. ```aria-disabled='true'```

![aria-meme](/uploads/accessibility_wai_aria_ef86285596.png)

> *Remember that WAI-ARIA is used to support assistive technologies, so avoid replacing semantic HTML.*

For more detailed information and a list of all attributes, I refer you to the website [Accessible Rich Internet Applications (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria{nofollow}).

## Summary{id}

More and more people are using the internet, including those using assistive technologies, so when [creating a website](/services/website-development), consider whether it will be accessible to every user.

You can check your website's accessibility at [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org{nofollow}).

Remember that by focusing on good [user experience](/services/product-and-ux-ui-design), we increase the chances that the user will return to our website.

Accessibility is not your website’s strongest side? [Dev and Deliver](/) experienced designers will improve the [user experience](/services/ux-design) and increase the chances of users returning to your website.



# **Developing a great website?** 
**Keep accessibility in mind.**

## So, what should you pay attention to in order to make the website accessible to everyone?

Sharing is

Next.js 15: Error Handling best practices for code and routes

Learn Error Handling in your Next.js 15 app. Discover how to handle errors in your code, manage server issues, and ensure smooth displays on routes

Next.js 15: Dynamic routes and Static Site Generation (SSG)

Explore Next.js dynamic routing and Static Site Generation (SSG) through practical examples.

Next.js 15 has been officially released!

Unveil the latest features of the most popular JS framework Next.js 15 - learn about Turbopack, enhanced caching, and more.

How to create a mobile app from a web app in just a few hours

An affordable and swift way to develop a mobile app with Ionic.

Pigment CSS - new library from Material UI

First look at a new zero-runtime CSS-in-JS library from Material UI with examples

React 19 has been officially announced!

Discover exciting new features that can revolutionize your app development process.

Next.js 14: Exploring fundamental concepts

Boost your web app performance.

Developing a great website?

So, what should you pay attention to in order to make the website accessible to everyone?