В этой статье блога мы рассмотрим, как создать собственный компонент _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 уже сегодня!