Директива 'use client'

Часть раздела Основы Next.js путешествия по React на Coddy — урок 19 из 47.

'use client' выглядит как случайно оставленная строка, которую кто-то забыл удалить. Но это не так: это директива, и у неё есть два правила, которые стоит запомнить, потому что на них часто попадаются.

Правило 1: это должна быть первая строка

Перед импортами. Перед имеющими значение комментариями. Самое первое в файле:

'use client';

import { useState } from 'react';

Переместите её ниже import, и она перестанет быть директивой: она превратится в бессмысленное строковое выражение, файл останется серверным компонентом, и вы получите ошибку хука, как будто вы её и не писали. На это люди тратят реальное время, потому что строка находится прямо в файле и выглядит правильно.

Правило 2: оно помечает весь файл

Нет способа пометить только один компонент. Если файл содержит директиву, всё, что в нём определено, является клиентским кодом:

'use client';

function Row() { … }        // клиент
export default function Table() { … }   // клиент тоже

И это распространяется вниз: всё, что импортирует и рендерит клиентский компонент, также становится клиентским кодом. Одна директива в начале большого файла может незаметно отправить в браузер много JavaScript — и это как раз та проблема, которую решает следующий урок.

Задание

Легко

В файле components/Counter.jsx строка 'use client' находится не на своём месте. Из-за этого приложение завершается с ошибкой хука.

Переместите 'use client'; так, чтобы эта строка стала первой строкой файла components/Counter.jsx, выше import.

Оба компонента в этом файле, Counter и отображаемый им ResetButton, становятся клиентскими компонентами благодаря этой одной строке. Вам не нужна вторая директива, и не следует её добавлять.

Попробуйте сами

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}