Сегодня мы изучим основы next/router и поймем проблемы, с которыми обычно сталкивается большинство разработчиков при начале работы.

Маршрутизатор Next.js – это неотъемлемая часть платформы Next.js, которая позволяет разработчикам легко создавать серверные приложения React с автоматическим разделением кода и оптимизированной производительностью. С Next.js Router вы можете настроить маршруты для обработки различных URL-адресов, навигации между страницами и обработки динамических параметров в вашем приложении. Это мощный инструмент, который можно использовать для создания широкого спектра приложений, от простых блогов до сложных веб-приложений.

useRouter

Хук useRouter — это функция, предоставляемая Next.js, которая позволяет вам получить доступ к объекту маршрутизатора внутри ваших функциональных компонентов React. Его можно использовать для получения текущего маршрута, навигации между маршрутами и выполнения других операций, связанных с маршрутизацией.

Чтобы использовать хук useRouter, вам нужно импортировать его из модуля next/router, а затем вызвать внутри вашего функционального компонента. Вот пример того, как вы можете использовать его для получения текущего маршрута:

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { pathname } = router;
  return <p>The current path is: {pathname}</p>;
}

В этом примере мы используем присваивание деструктурирования, чтобы извлечь свойство pathname из объекта router, а затем отобразить его как элемент абзаца.

router.push

router.push — это метод, предоставляемый Next.js Router, который позволяет вам перейти к другому маршруту в вашем приложении. Его можно использовать для программного перехода к новому маршруту либо из функции внутри компонента, либо из обработчика событий.

Чтобы использовать router.push, вам нужно импортировать хук useRouter из модуля next/router, а затем вызвать его внутри вашего компонента. Вот пример того, как вы можете использовать router.push для перехода к новому маршруту при нажатии кнопки:

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const handleClick = () => {
    router.push('/some/other/route');
  };
  return <button onClick={handleClick}>Go to another route</button>;
}

В этом примере мы используем метод router.push для перехода к новому маршруту при нажатии кнопки. Метод router.push принимает один аргумент — путь к маршруту, к которому вы хотите перейти.

router.push способ передачи параметров запроса:

Вы также можете использовать метод router.push для передачи параметров запроса в новый маршрут. Для этого вы можете передать объект в качестве второго аргумента router.push, например:

router.push('/some/route', { query: { param: 'value' } });

Проблема в рендеринге на стороне клиента:

Это самая важная проблема, которая до сих пор не решена командой Next.js.

В приложении Next.js вы можете выбрать, использовать ли SSR (рендеринг на стороне сервера) или CSR (рендеринг на стороне клиента) для каждой страницы. Если вы используете SSR, страница будет отображаться на сервере, а объект query будет заполнен проанализированными параметрами запроса. Если вы используете CSR, страница будет отображаться на клиенте, а объект query будет пустым во время предварительной обработки.

Объект query передается компоненту страницы в качестве реквизита и доступен через хук useRouter. Если во время пререндеринга объект query является пустым, это означает, что страница рендерится на клиенте, а параметры запроса недоступны на сервере.

Например, если вы перейдете к маршруту /destination с параметром запроса myData, для которого установлено значение some data, результирующий URL-адрес будет выглядеть примерно так: /destination?myData=some%20data. Если страница /destination использует SSR, объект query будет содержать проанализированные параметры запроса, и вы сможете получить доступ к параметру myData на маршруте назначения. Если страница /destination использует CSR, объект query будет пустым во время предварительной визуализации, и вы не сможете получить доступ к параметру myData на сервере. Вы сможете получить доступ к параметру myData на клиенте только после того, как страница завершит рендеринг.

Команда Next.js упускает из виду серьезную проблему.

Давайте посмотрим, как мы можем решить эту проблему, используя некоторые хаки.

Как решить проблему с пустым объектом CSR?

Использование JSON.stringify для сериализации данных, передаваемых через свойство state, может быть решением проблемы query, когда объект является пустым объектом во время предварительного рендеринга в приложении Next.js, отображаемом на стороне клиента (CSR).

Вот пример того, как вы можете использовать JSON.stringify для передачи сериализуемых данных через свойство state:

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    router.push({
      pathname: '/destination',
      query: {
        myData: JSON.stringify({'some data'})
       }
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Go to destination</button>
    </div>
  );
}

На маршруте /destination вы можете использовать JSON.parse для десериализации данных, переданных через свойство state:

import { useRouter } from 'next/router';

function Destination() {
  const router = useRouter();
  const { myData } = router.query;
  const [data, setData] = React.useState({})

  useEffect(() => {
      if (myData) setData(JSON.parse(myData));
    }, [router.query]);
 
  return (
    <div>
      <p>Received data: {data}</p>
    </div>
  );
}

Таким образом, мы передаем объекты последующим компонентам. И этот хак очень удобен, когда вы имеете дело с проблемой пустого объекта CSR.

Теперь, когда вы отправили данные через маршрутизатор. Но если вы не хотите показывать данные в строке URL или не хотите предоставлять данные. Возможно, иногда вы хотите, чтобы ваша строка URL была чистой. Есть хак для достижения того же самого.

Пример отправки чистой строки URL/предотвращения раскрытия данных:

router.push({
      pathname: '/destination',
      query: {
        myData: JSON.stringify({'some data'})
       }
    }, '/destination');

Приведенный выше пример помогает нам отправлять данные через параметры запроса, но с чистым URL-адресом.

В этом уроке мы узнали о:

  • Как начать работу с next/router ?
  • Такие функции, как router.push().
  • Как отправлять объекты/данные через params.
  • Проблемы, связанные с рендерингом на стороне клиента и их решение.
  • Как отправить данные через params, используя чистый URL?

Удачного кодирования!

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу