logo

Vylepšete odkazy na svůj web pomocí Next js

Cíl

Vždy mi přišlo super, když má web náhled odkazu, když někde sdílíte url. Je to opravdu jednoduché přidat, ale mám pocit, že to vašemu webu přináší hodně.

Řekněme, že máte web o zemích a chcete sdílet odkaz na zemi Bolívie, takže odkaz sdílíte na discordu.

Vycházíme z tohoto

k tomuto

Nastavení aplikace

Pro tento projekt použijeme můj oblíbený meta framework pro reakce:Next js!

Vytvořme novou aplikaci next js pomocí následujícího příkazu 

npx create-next-app@latest countries-seo --typescript
# or
yarn create next-app countries-seo --typescript

Jediná knihovna, kterou budeme v této příručce používat, je next-seo , aby byla správa SEO jednodušší.

Pojďme jej nainstalovat, v kořenové složce spusťte následující příkaz. 

npm install next-seo
# or
yarn add next-seo

Potřebujeme odněkud získat všechna tato data o zemi, pojďme zatím s tímto rozhraním pro pěkné země.

Než budeme pokračovat, jedna malá, ale důležitá věc, aby se obrázky z rozhraní API vykreslovaly v naší aplikaci, přidejte doménu API do next.config.js soubor. 

/** @type {import('next').NextConfig} */

module.exports = {
  images: {
    domains: ["flagcdn.com"],
  },
  reactStrictMode: true,
};

Co bude aplikace dělat?

Vytvoříme aplikaci, která bude zobrazovat informace o zemi na základě adresy URL. Toto bude dynamická trasa, protože nechceme vytvořit trasu pro každou zemi na světě.

Aby bylo SEO dynamické, potřebujeme, aby naše data pocházela ze serveru. Můžeme to udělat pomocí buď getServerSideProps nebo getStaticProps , protože data, se kterými se zabýváme, se nezmění, pojďme s getStaticProps .

U nedynamické trasy může být SEO statické, za normálních okolností pro tyto případy nepotřebujete žádné načítání dat na straně serveru

Pokud vám tato slova nejsou povědomá, doporučuji, abyste si před pokračováním v této příručce nastudovali trochu více o next js a jejích metodách načítání dat.

Je důležité použít jeden z těchto přístupů k načítání dat, protože by to zpřístupnilo data všude, kde použijeme vkládání našich odkazů, protože to bude na straně serveru. Pokud bychom měli načíst na klientovi, nemohli bychom mít náhledy dynamických odkazů, jak se nyní chystáme implementovat.

Vytvoření komponenty

Vytvořme jednoduchou komponentu, která vykreslí informace o zemi. K tomu potřebujeme dynamickou cestu uvnitř pages vytvořte další složku s názvem country s [name].tsx soubor dovnitř a přidejte následující obsah. 

import Image from "next/image";

import type { GetStaticProps } from "next";

interface Country {
  country: {
    name: {
      common: string;
    };
    flags: {
      png: string;
    };
    capital: string;
  };
}

const Country = ({ country }: Country) => {
  if (!country) {
    return (
      <div>
        <p>Country not found</p>
      </div>
    );
  }
  return (
    <div>
      <p>{country?.name?.common}</p>
      <Image
        alt={country.name.common}
        src={country.flags.png}
        height={213}
        width={320}
      />
    </div>
  );
};

Načítání dat

Nyní musíme do komponenty vložit informace o zemi. Protože se jedná o dynamickou trasu, která bude používat getStaticProps musíme přidat getStaticPaths funkce pro generování seznamu cest. Rozhraní API pro země má koncový bod, který uvádí všechny dostupné země, což je pro náš případ perfektní, protože to budou všechny naše možné cesty.

Pod komponent přidejte následující 

export const getStaticPaths = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all");

  const data = await res.json();

  return {
    paths: data?.map((country: { name: { common: string } }) => {
      return {
        params: {
          name: country?.name?.common?.toLowerCase()?.replace(/ .*/,'')
        },
      };
    }),
    fallback: true,
  };
};

Bum, toto vygeneruje všechny cesty pro naši dynamickou trasu.

Logika získání názvu země není dokonalá a pravděpodobně bude chybět v některých případech, ale bude fungovat pro většinu zemí a pro účely tohoto výukového programu

Nyní, když máme své cesty, vytvořte getStaticProps funkce. Tato funkce vloží do komponenty údaje o zemi. 

export const getStaticProps: GetStaticProps = async ({ params }) => {
  try {
    const res = await fetch(
      `https://restcountries.com/v3.1/name/${params?.name}`
    );

    const results = await res.json();
    return {
      props: {
        country: results?.[0] ?? null,
      },
    };
  } catch (error) {
    return {
      props: {
        country: null,
      },
    };
  }
};

Získáváme název země z parametrů adresy URL a pokusíme se provést volání API, které získá informace o zemi, pokud je název platný. Pokud je vše v pořádku, předáme zemi jako rekvizitu komponentě nebo null pokud selže volání rozhraní API.

SEO

Nakonec použijeme next-seo vygenerovat náhled dynamického odkazu. next-seo nám pomáhá vytvářet meta tagy, můžete to udělat úplně bez toho, ale s knihovnou je to o něco jednodušší. Doporučuji prozkoumat next-seo docs, abyste viděli všechny dostupné možnosti a funkce, prozatím přidáme jednoduchou konfiguraci, která bude zobrazovat název země, hlavní město a vlajku.

Přidejte next-seo komponent:

const Country = ({ country }: Country) => {
  if (!country) {
    return (
      <div>
        <p>Country not found</p>
      </div>
    );
  }
  return (
    <div>
      <p>{country?.name?.common}</p>
      <Image
        alt={country.name.common}
        src={country.flags.png}
        height={213}
        width={320}
      />
      <NextSeo
        openGraph={{
          type: "website",
          title: country.name.common,
          description: `Capital ${country.capital}`,
          images: [
            {
              url: country.flags.png,
              width: 320,
              height: 213,
              alt: country.name.common,
            },
          ],
        }}
      />
    </div>
  );
};

Sbalení

A máme hotovo!

Vaše pages/country/[name].tsx soubor by měl vypadat takto 

import { NextSeo } from "next-seo";
import Image from "next/image";

import type { GetStaticProps } from "next";

interface Country {
  country: {
    name: {
      common: string;
    };
    flags: {
      png: string;
    };
    capital: string;
  };
}

const Country = ({ country }: Country) => {
  if (!country) {
    return (
      <div>
        <p>Country not found</p>
      </div>
    );
  }
  return (
    <div>
      <p>{country?.name?.common}</p>
      <Image
        alt={country.name.common}
        src={country.flags.png}
        height={213}
        width={320}
      />
      <NextSeo
        openGraph={{
          type: "website",
          url: "https://www.example.com/page",
          title: country.name.common,
          description: `Capital ${country.capital}`,
          images: [
            {
              url: country.flags.png,
              width: 320,
              height: 213,
              alt: country.name.common,
            },
          ],
        }}
      />
    </div>
  );
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  try {
    const res = await fetch(
      `https://restcountries.com/v3.1/name/${params?.name}`
    );

    const results = await res.json();
    return {
      props: {
        country: results?.[0] ?? null,
      },
    };
  } catch (error) {
    return {
      props: {
        country: null,
      },
    };
  }
};

export const getStaticPaths = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all");

  const data = await res.json();

  return {
    paths: data?.map((country: { name: { common: string } }) => {
      return {
        params: {
          name: country?.name?.common?.toLowerCase()?.replace(/ .*/, ""),
        },
      };
    }),
    fallback: true,
  };
};

export default Country;

Testování

Nemůžeme to opravdu otestovat, dokud nenasadíme naši aplikaci. Next js je trochu speciální, vyžaduje o něco více nasazení než běžná aplikace na straně klienta, pokud používáte některou z funkcí SSR.
Naštěstí služby jako Vercel nebo Netlify (s dalším pluginem js) opravdu usnadňují nasazení naší aplikace se všemi jejími funkcemi zdarma (pro vedlejší projekty).

Vytvořte si účet, pokud jej nemáte, nasaďte aplikaci a podíváme se, jak vypadají odkazy.

Nyní pojďme testovat s Fidži!

Sdílejte tento odkaz někde

${Your website's url}/country/fiji

Měla by se objevit vlajka Fidži

Vypadá skvěle!

Nyní jděte, aby všechny vaše odkazy byly úžasné!

Děkujeme za přečtení, pokud vám to přišlo užitečné, dejte like a sdílejte :)