Как да получите текущия URL адрес в Next.js

За да получите текущия URL адрес в Next.js, използвайте window.location.href:

src/app/page.tsx

'use client';
import React from 'react';

export const metadata: Metadata = {
  title: 'Next.js - Coding Beauty',
  description: 'Next.js Tutorials by Coding Beauty',
};
export default function Page() {
  const urlRef = useRef<string>('');
  const { pathname } = useRouter();
  
  useEffect(() => {
    urlRef.current = window.location.href;
  }, []);
  return (
    <main>
      Welcome to Coding Beauty 😄
      <br/>
      <br/>
      URL: <b>{urlRef.current}</b>
      <br/>
      route: <b>{pathname}</b>
    </main>
  );
}

С pages директория:

src/pages/index.tsx

import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useRef } from 'react';

export default function Home() {
  const urlRef = useRef<string>('');
  const { pathname } = useRouter();
  useEffect(() => {
    console.log(window.location.href);
    urlRef.current = window.location.href;
  }, []);
  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Next.js Tutorials by Coding Beauty" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        Welcome to Coding Beauty 😄
        <br />
        <br />
        URL: <b>{urlRef.current}</b>
        <br />
        pathname: <b>{pathname}</b>
      </main>
    </>
  );
}

Свойството window.location.href връща низ, съдържащ целия URL адрес на страницата.

имаме нужда от `useEffect`

В Next.js страниците се изобразяват както на сървъра, така и на клиента.

Така че, когато сървърът визуализира страницата, няма наличен обект window!

Точно като в Node.js, нали? Да — сървърната среда.

Така че ще получите грешка „прозорецът не е дефиниран“, ако се опитате да използвате window преди хидратация.

Забележка: Хидратацията е, когато уеб страница, генерирана от сървър, получава допълнителни функции от страна на клиента, добавени от уеб браузъра на потребителя. Функции като слушатели на събития, маршрутизиране от страна на клиента и др.

Next.js App Router: Имаме нужда от `'use client'`

Обърнете внимание на израза 'use client' в горната част.

Това е там, защото всички компоненти в новата директория app са сървърни компоненти по подразбиране.

Това означава, че нямаме достъп до специфични API от страна на клиента.

Не можем да направим нищо интерактивно с useEffect или други куки.

Опитът за достъп до window без 'use client' отново ще доведе до грешката „прозорецът не е дефиниран“.

Тъй като това е сървърна среда, в която window не съществува.

`window.location`

window.location има други свойства, които ви казват повече за URL. Като:

pathname: пътят на URL след името на домейна и всеки незадължителен номер на порт. Идентификаторът на заявка и фрагмент не е включен.
protocol: схема на протокола на URL, като https: или mailto:. Не включва //.
hostname: името на домейна на URL без номера на порта.

Ето всяка демонстрация, в която използваме някои от тези свойства:

pages/index.tsx

'use client';
import React from 'react';

export const metadata: Metadata = {
  title: 'Next.js - Coding Beauty',
  description: 'Next.js Tutorials by Coding Beauty',
};

export default function Page() {
  const url = window.location.href;
  const pathname = window.location.pathname;
  const protocol = window.location.protocol;
  const hostname = window.location.hostname;
  return (
    <div>
      You are currently accessing <b>{url}</b> 😃
      <br />
      Pathname 👉 <b>{pathname}</b>
      <br />
      Protocol 👉 <b>{protocol}</b>
      <br />
      Hostname 👉 <b>{hostname}</b>
    </div>
  );
}

Вземете текущия URL адрес в Next.js getServerSideProps

Не можем да използваме window, когато сме в getServerSideProps.

За да получите текущия URL адрес в getServerSideProps, вместо това използвайте req.url и req.headers.host от обекта context.

req.url е URL пътеката, req.headers.host е хостът - включително порта и всичко останало.

pages/amazing-url.tsx

import { NextPageContext } from 'next';
import Head from 'next/head';

export function getServerSideProps(context: NextPageContext) {
  console.log(context.req!.url);
  const pathname = context.req!.url;
  const absoluteUrl = context.req!.headers!.host! + pathname;
  return {
    props: {
      pathname,
      absoluteUrl,
    },
  };
}
export default function Home({
  pathname,
  absoluteUrl,
}: {
  pathname: string;
  absoluteUrl: string;
}) {
  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main>
        Welcome to Coding Beauty 😃
        <br />
        <br />
        Your path 👉 <b>{pathname}</b>
        <br />
        Your absolute URL 👉 <b>{absoluteUrl}</b>
        <br />
      </main>
    </>
  );
}

За да получим различни свойства на URL адреса, можем да използваме обекта URL.

src/pages/amazing-url.tsx

import { NextPageContext } from 'next';
import Head from 'next/head';

export function getServerSideProps(context: NextPageContext) {
  const pathname = context.req!.url;
  const host = context.req!.headers!.host!;
  const scheme = 'http://';
  const absoluteUrl = scheme + host + pathname;
  
  return {
    props: {
      pathname,
      absoluteUrl,
    },
  };
}
export default function Home({
  pathname,
  absoluteUrl,
}: {
  pathname: string;
  absoluteUrl: string;
}) {
  // 👇 Pass string to URL() constructor
  const urlObj = new URL(absoluteUrl);
  return (
    <>
      <Head>
        <title>Next.js - Coding Beauty</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main>
        Welcome to Coding Beauty 😃
        <br />
        <br />
        Your pathname 👉 <b>{pathname}</b>
        <br />
        Your absolute URL 👉 <b>{absoluteUrl}</b>
        <br />
        href 👉 <b>{urlObj.href}</b>
        <br />
        protocol 👉 <b>{urlObj.protocol}</b>
        <br />
        hostname 👉 <b>{urlObj.hostname}</b>
        <br />
        pathname 👉 <b>{urlObj.pathname}</b>
        <br />
        search 👉 <b>{urlObj.search}</b>
      </main>
    </>
  );
}

Можете да използвате URL за лесно извличане на различни части от URL адреса.

Ето какво правят тези свойства:

href: пълният URL адрес, включително протокол, име на хост, номер на порт, път, параметри на заявката и идентификатор на фрагмент.
protocol: Схемата на протокола на URL, като https: или mailto:. Не включва //.
hostname: името на домейна на URL без номера на порта.
pathname: пътят на URL адреса и името на файла без идентификатора на заявката и фрагмента.
search: параметрите на заявката на URL адреса. Включва ?

Доста удобно, нали?

Ключови изводи

За да намерите текущия URL в Next.js, можете да използвате window.location.href.
Тъй като обектът window не е наличен по време на рендиране на сървъра, трябва да използвате useEffect, за да предотвратите грешки „прозорецът не е дефиниран“.
В Next.js App Router използвайте 'use client' декларирайте клиентски компонент и разрешете window достъп.
Обектът window.location предлага допълнителни свойства като pathname, protocol и hostname, които дават повече подробности за URL адреса.
Когато работите със сървърни функции като getServerSideProps, не можете да използвате window.
Вместо това разчитайте на req.url и req.headers.host от контекстния обект, за да получите текущия URL адрес.
Можете да използвате обекта URL за лесно извличане на различни части от URL адреса.
Като href, protocol, hostname, pathname и search.

11 невероятни нови функции на JavaScript в ES13

Това ръководство ще ви запознае с всички най-нови функции, добавени в ECMAScript 13!

Тези мощни нови функции ще модернизират вашия JavaScript с по-кратък и по-изразителен код.

Регистрирайте се и получете безплатно копие веднага.

Как да получите текущия URL адрес в Next.js

имаме нужда от useEffect

Next.js App Router: Имаме нужда от 'use client'

window.location