Next.js — это популярная платформа для создания приложений React, отображаемых на сервере. При работе с Next.js вы можете столкнуться с необходимостью определить местоположение или маршрут URL-адреса внутри вашего приложения. В этой статье мы рассмотрим различные методы решения этой задачи, приведя попутно примеры кода.

Метод 1: использование перехватчика useRouter
Next.js предоставляет встроенный перехват под названием useRouter, который позволяет легко получить доступ к текущему URL-адресу и информации о маршрутизации. Вот пример:

import { useRouter } from 'next/router';
function MyComponent() {
  const router = useRouter();
  const { pathname } = router;
  console.log('Current path:', pathname);
  // Rest of the component code
}

Метод 2: использование getInitialProps
Если вы используете версии Next.js до 9.3, вы можете использовать метод жизненного цикла getInitialProps для доступа к URL-адресу. Вот пример:

function MyComponent({ pathname }) {
  console.log('Current path:', pathname);
  // Rest of the component code
}
MyComponent.getInitialProps = async ({ pathname }) => {
  return { pathname };
};
export default MyComponent;

Метод 3: использование getServerSideProps
Для Next.js версии 9.3 и выше вы можете использовать функцию getServerSideProps для получения данных и доступа к URL-адресу на стороне сервера. Вот пример:

export async function getServerSideProps(context) {
  const { req } = context;
  const { url } = req;
  console.log('Current URL:', url);
  return {
    props: {
      // Pass additional data to the component
    },
  };
}
function MyComponent() {
  // Component code
}
export default MyComponent;

Метод 4: использование getStaticPaths и getStaticProps
Если вы используете генерацию статического сайта (SSG) с Next.js, вы можете использовать функции getStaticPaths и getStaticProps для доступа к местоположению URL-адреса во время процесса сборки. Вот пример:

export async function getStaticPaths() {
  // Return an array of possible paths
}
export async function getStaticProps({ params }) {
  const { slug } = params;
  console.log('Current slug:', slug);
  return {
    props: {
      // Pass additional data to the component
    },
  };
}
function MyComponent() {
  // Component code
}
export default MyComponent;

В этой статье мы рассмотрели несколько методов определения местоположения URL-адреса в Next.js. Используя перехватчик useRouter, функции getInitialProps, getServerSideProps или getStaticPaths/getStaticProps, вы можете легко получить доступ к информации URL-адреса и включить ее в логику вашего приложения. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните использовать возможности маршрутизации Next.js в своих приложениях.