В Next.js передача аргументов на сервер Node.js необходима для создания динамических и интерактивных приложений. В этой статье мы рассмотрим различные методы передачи аргументов Node в Next.js, а также примеры кода. К концу вы получите полное представление о том, как обрабатывать аргументы узла в приложениях Next.js.

Метод 1: параметры маршрутизации
Один из наиболее распространенных способов передачи аргументов узла в Next.js — через параметры маршрутизации. Этот метод полезен, если вы хотите включить в URL-адрес динамические значения.

Пример:
Чтобы передать идентификатор пользователя в качестве аргумента узла, определите динамический маршрут в приложении Next.js:

1. Создайте файл с именем [userId].jsв каталоге pages.
2. Внутри файла экспортируйте функциональный компонент, который получает и использует идентификатор пользователя:

import { useRouter } from 'next/router';
const UserPage = () => {
  const router = useRouter();
  const { userId } = router.query;
  // Use the userId in your component logic
  // ...
  return (
    <div>
      <h1>User ID: {userId}</h1>
      {/* Render the rest of your component */}
    </div>
  );
};
export default UserPage;

Теперь при доступе к URL-адресу /user/123параметр userIdбудет доступен в объекте router.query.

Метод 2: Параметры запроса
Параметры запроса позволяют передавать аргументы узла в виде пар ключ-значение в URL-адресе. Этот метод подходит для сценариев, в которых необходимо передать необязательные аргументы или несколько аргументов.

Пример:
Чтобы передать поисковый запрос в качестве аргумента узла с использованием параметров запроса, измените URL-адрес следующим образом: /search?query=my-search-term.

1. В вашем компоненте Next.js используйте хук useRouterдля доступа к параметрам запроса:

import { useRouter } from 'next/router';
const SearchPage = () => {
  const router = useRouter();
  const { query } = router.query;
  // Use the query in your component logic
  // ...
  return (
    <div>
      <h1>Search Query: {query}</h1>
      {/* Render the rest of your component */}
    </div>
  );
};
export default SearchPage;

Метод 3: рендеринг на стороне сервера (SSR) с маршрутами API.
Если вам необходимо безопасно передать аргументы узла или выполнить обработку на стороне сервера перед отрисовкой страницы, вы можете использовать маршруты API Next.js.

Пример:

1. Создайте маршрут API, создав файл с именем myApiRoute.jsв каталоге pages/api.
2. Внутри файла определите функцию-обработчик, которая получает аргументы узла в качестве параметров:

export default function handler(req, res) {
  const { userId } = req.query;
  // Perform server-side processing using the userId
  // ...
  res.status(200).json({ data: /* processed data */ });
}

1. В вашем компоненте Next.js выполните HTTP-запрос к маршруту API для получения обработанных данных:

import { useEffect, useState } from 'react';
const UserPage = () => {
  const [userData, setUserData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/myApiRoute?userId=123');
      const data = await response.json();
      setUserData(data);
    };
    fetchData();
  }, []);
  // Use the userData in your component logic
  // ...
  return (
    <div>
      {/* Render the userData */}
    </div>
  );
};
export default UserPage;

Передача аргументов узла в Next.js имеет решающее значение для создания динамических и интерактивных приложений. Мы исследовали три метода: параметры маршрутизации, параметры запроса и рендеринг на стороне сервера с помощью маршрутов API. Каждый метод предлагает гибкость в зависимости от вашего конкретного случая использования. Понимая эти методы, вы сможете использовать возможности Next.js для создания более надежных приложений.

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