Организиране на вашето приложение Next.js и използване на компоненти.

Представете си, че искате да използвате Next.js за създаване на приложение и че искате всяка страница да има отделна SEO стратегия, както и същия горен, долен колонтитул и навигационна лента.

Какво можете да успеете да направите?

Простата опция е да се изгради споделен компонент, който се извиква многократно на всяка страница.

Но може да опитате това 👇

  • Надявам се, че вече сте разработили приложение Next.js, преди да прочетете това.
    Ако не, посетете тази страница 👉 https://nextjs.org/docs/getting-started
  • Създайте два компонента с имената Format и SEOSetup в нова папка, наречена components в директорията src.
  • Този компонент, „Формат,“ се отнася до оформлението на страницата.
    Тук, в този случай, оформлението на всяка страница ще бъде в този поток Навигационна лента, след това Основно съдържание и след това Долен колонтитул.
    И затова го дефинираме по-долу 👇
import { FC } from 'react';
import Footer from '../Footer';
import Navbar  from '../Navbar';
const Format: FC = (props) => {
  return (
    <>
      <Navbar />
      <Main>{props.children}</Main>
      <Footer />
    </>
  );
};
export default Format;
  • В SEOSetup ние наистина изграждаме общ таг с данни, предоставени като подпори за полетата на мета и заглавния таг.
    За да можем да използваме този компонент SEOSetup всеки път, когато трябва да дефинираме свързана със SEO информация на дадена страница, вместо да създаваме многократно етикет head.
import Head from 'next/head';
export interface MetaData {
  title: string;
  description: string;
}
const SEOSetup: FC<MetaData> = (props) => {
  const {
    title,
    description,    
  } = props;
return (
    <Head>
      <title>{title}</title>
      <meta name={'title'} content={title} />
      <meta name={'description'} content={description} />
    </Head>
  );
};
export default SEOSetup;
  • И накрая, използвайте ги на страница. Тук просто обвиваме страницата с компонента Format и настройваме SEO с нашия персонализиран таг SEOSetup.
import type { NextPage } from 'next'
import Format from '../components/Format';
import SEOSetup from '../components/SEOSetup';
const Home: NextPage = () => {
  return (
    <Format>
      <SEOSetup
        title="This is title of the Home Page"
        description="This is description of Home Page"
      />
      <div>
        This is Home Page.
      </div>
    </Format>
  )
}
export default Home;

⭐️ ⭐️ КРАЯТ ⭐️️️️️ ⭐️

Надявам се да намерите това за полезно. 🙌
Моля, кажете ми в коментарите. 📪
За повече от този тип неща, последвайте ме в Twitter — @ShubhInTech