В этой статье блога мы углубимся в Next.js и рассмотрим различные методы создания страниц с использованием TypeScript. Next.js — это мощная платформа для создания приложений React с серверным рендерингом, статической генерацией и другими расширенными функциями. Объединив Next.js с TypeScript, мы можем получить преимущества от статической проверки типов и повысить качество кода. Итак, начнём!

1. Базовая структура страницы.
   Чтобы создать страницу Next.js в TypeScript, мы начинаем с создания нового файла с расширением .tsx. Это означает, что файл содержит код JSX и TypeScript. Вот базовая структура страницы:

import React from 'react';
const MyPage: React.FC = () => {
  return <div>Hello, Next.js!</div>;
};
export default MyPage;

1. Добавление реквизитов:
   Next.js поддерживает передачу реквизитов на страницы, что позволяет нам передавать данные из родительских компонентов. Чтобы добавить реквизиты в компонент страницы, мы определяем интерфейс для реквизитов и используем его в определении компонента:

interface MyPageProps {
  name: string;
}
const MyPage: React.FC<MyPageProps> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};
export default MyPage;

1. Динамические маршруты:
   Next.js позволяет нам создавать динамические маршруты с помощью квадратных скобок ([]) в имени файла подкачки. Например, чтобы создать динамический маршрут для сообщения в блоге с идентификатором, мы можем создать файл с именем [postId].tsx:

interface PostPageProps {
  postId: string;
}
const PostPage: React.FC<PostPageProps> = ({ postId }) => {
  return <div>Displaying post with ID: {postId}</div>;
};
export default PostPage;

1. Доступ к параметрам запроса.
   Next.js предоставляет встроенный крючок useRouterиз пакета next/routerдля доступа к параметрам запроса. Вот пример того, как получить параметры запроса на странице Next.js:

import { useRouter } from 'next/router';
const MyPage: React.FC = () => {
  const router = useRouter();
  const { name } = router.query;
  return <div>Hello, {name}!</div>;
};
export default MyPage;

1. Рендеринг на стороне сервера (SSR).
   Next.js предлагает рендеринг на стороне сервера, что позволяет нам получать данные на сервере и передавать их реквизитам страницы. Чтобы получить данные во время рендеринга на стороне сервера, мы можем использовать функцию getServerSideProps:

import { GetServerSideProps } from 'next';
interface MyPageProps {
  data: string;
}
const MyPage: React.FC<MyPageProps> = ({ data }) => {
  return <div>Data: {data}</div>;
};
export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
};
export default MyPage;

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