Создание пользовательского _App с помощью getInitialProps: пример TypeScript

В этой статье блога мы рассмотрим, как создать собственный компонент _App с помощью TypeScript и getInitialProps в Next.js. Мы углубимся в мельчайшие детали, предоставив примеры кода и используя разговорный язык для объяснения различных задействованных методов. Итак, начнём!

Раздел 1. Общие сведения о пользовательском компоненте _App
Компонент _App в Next.js — это специальный компонент, который действует как оболочка для всех остальных страниц вашего приложения. Это позволяет вам настроить общий макет и поведение вашего приложения. Чтобы использовать его, создайте файл с именем «_app.tsx» в каталоге «pages».

Раздел 2. Настройка TypeScript и Next.js
Для начала убедитесь, что у вас есть проект Next.js, настроенный с использованием TypeScript. Вы можете создать новый проект с помощью следующей команды:

npx create-next-app@latest --typescript

Раздел 3. Добавление getInitialProps в _App
Чтобы получить данные и выполнить рендеринг на стороне сервера, мы можем использовать метод getInitialProps внутри пользовательского компонента _App. Вот пример того, как это можно реализовать:

import App, { AppContext } from 'next/app';
class MyApp extends App {
  static async getInitialProps({ Component, ctx }: AppContext) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}
export default MyApp;

Раздел 4. Использование getInitialProps на страницах
Чтобы использовать метод getInitialProps на своих страницах, вы можете определить его как статический метод в компонентах вашей страницы. Вот пример:

import { NextPageContext } from 'next';
interface PageProps {
  data: string;
}
interface MyPageProps extends PageProps {
  additionalProp: string;
}
const MyPage = ({ data, additionalProp }: MyPageProps) => (
  <div>
    <h1>{data}</h1>
    <p>{additionalProp}</p>
  </div>
);
MyPage.getInitialProps = async (ctx: NextPageContext): Promise<PageProps> => {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { data };
};
export default MyPage;

Раздел 5. Заключение
Включив метод getInitialProps в свой собственный компонент _App, вы сможете получать данные и выполнять рендеринг на стороне сервера для вашего приложения Next.js. Этот подход позволяет вам предоставлять исходные данные всем страницам вашего приложения и настраивать поведение на основе полученных данных. Приятного кодирования!

Создание собственного компонента _App с помощью getInitialProps в Next.js открывает мир возможностей для рендеринга на стороне сервера и получения данных. Следуя шагам, описанным в этой статье, вы сможете использовать возможности TypeScript для создания надежного и производительного веб-приложения. Итак, начните внедрять эту технику в свои проекты Next.js уже сегодня!