Как использовать типизированные маршруты в Next.js
Next.js - это мощный фреймворк React, который упрощает создание веб-приложений, предоставляя набор условностей и встроенных функций. Одной из ключевых особенностей Next.js является система маршрутизации, которая позволяет разработчикам создавать страницы и с легкостью перемещаться между ними. Благодаря введению типизированных маршрутов Next.js повышает удобство работы разработчиков, обеспечивая безопасность типов для маршрутизации, особенно при использовании TypeScript.
Понимание типизированных маршрутов в Next.js
Типизированные маршруты в Next.js - это экспериментальная функция, которая обеспечивает статически типизированные ссылки в вашем приложении. Эта функция является частью Next.js App Router и требует использования TypeScript в вашем проекте. Основное преимущество типизированных маршрутов заключается в том, что они помогают убедиться в корректности ссылок в вашем приложении во время компиляции, снижая вероятность ошибок во время выполнения из-за неправильных URL или отсутствующих параметров запроса.
Чтобы включить типизированные маршруты в вашем проекте Next.js, необходимо установить опцию typedRoutes в true в файле next.config.js. Вот пример конфигурации:
// next.config.js
const nextConfig = {
experimental: {
typedRoutes: true,
},
};
module.exports = nextConfig;Эта функция пока находится в бета-версии и в настоящее время не поддерживает переписывание и перенаправление. Тем не менее, это значительный шаг к повышению безопасности типов в приложениях Next.js.
Использование nextjs-routes для типизированной маршрутизации
Хотя встроенная функция типизированных маршрутов в Next.js все еще является экспериментальной, существует сторонняя библиотека nextjs-routes, которая обеспечивает безопасную для типов маршрутизацию как для каталога приложений, так и для страниц. Эта библиотека сканирует каталог страниц и генерирует типы маршрутов на основе маршрутов вашего приложения, обеспечивая безопасность типов ваших ссылок с нулевыми накладными расходами во время выполнения.
Установка и настройка
Чтобы использовать nextjs-routes, вам нужно установить пакет и обновить файл next.config.js следующим образом:
npm install nextjs-routes
# or
yarn add nextjs-routes
# or
pnpm add nextjs-routesЗатем обновите файл next.config.js:
// next.config.js
const nextRoutes = require("nextjs-routes/config");
const withRoutes = nextRoutes();
const nextConfig = {
reactStrictMode: true,
};
module.exports = withRoutes(nextConfig);После запуска npx next dev или npx next build будет сгенерирован файл @types/nextjs-routes.d.ts, который дополняет определения типов next/link и next/router.
Примеры типизированной маршрутизации с помощью nextjs-routes
Вот несколько примеров того, как можно использовать типизированную маршрутизацию с помощью nextjs-routes:
Компонент ссылки
import Link from "next/link";
// Typed href based on your application routes
<Link
href={{
pathname: "/posts/[postId]",
query: { postId: "123" },
}}
>
Read Post
</Link>;
// For routes without parameters, you can use a string
<Link href="/about">About Us</Link>;Хук useRouter
import { useRouter } from "next/router";
const router = useRouter();
// Typed push method
router.push({
pathname: "/posts/[postId]",
query: { postId: "456" },
});
// Typed replace method
router.replace("/");
// Typed query object
const { query } = useRouter();
// query is typed as a union of all query parameters defined by your application's routesgetServerSideProps
import type { GetServerSidePropsContext } from "nextjs-routes";
export function getServerSideProps(
context: GetServerSidePropsContext<"/posts/[postId]">
) {
// context.params will include `postId` as a string
const { postId } = context.params;
}Нестандартный пример: Маршруты для записей в блоге
Давайте создадим собственный пример, чтобы проиллюстрировать, как типизированные маршруты могут быть использованы в практическом сценарии. Представьте, что у нас есть приложение для блога с динамическими маршрутами для отдельных записей. Мы хотим убедиться, что наши ссылки на эти записи безопасны для типов.
Сначала мы определяем страницу записи блога в файле pages/posts/[postId].tsx. Затем мы используем nextjs-routes для генерации типизированных маршрутов.
// pages/posts/[postId].tsx
import { useRouter } from "next/router";
import Link from "next/link";
const PostPage = () => {
const router = useRouter();
const { postId } = router.query as { postId: string };
return (
<div>
<h1>Post {postId}</h1>
<Link href="/posts">
<a>Back to posts</a>
</Link>
</div>
);
};
export default PostPage;Теперь, когда мы ссылаемся на пост, мы можем использовать типизированный href, чтобы убедиться, что мы передаем правильный postId:
// pages/posts/index.tsx
import Link from "next/link";
const PostsList = ({ posts }) => {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link
href={{
pathname: "/posts/[postId]",
query: { postId: post.id },
}}
>
{post.title}
</Link>
</li>
))}
</ul>
);
};
export default PostsList;С nextjs-routes, если мы случайно ошибемся в маршруте или забудем передать требуемый postId, TypeScript предупредит нас во время компиляции, предотвращая потенциальные ошибки во время выполнения.
Заключение
Типизированные маршруты в Next.js - это надежный способ обеспечить безопасность типов маршрутизации в вашем приложении, снизить риск ошибок и повысить удобство работы разработчика. В то время как встроенная функция типизированных маршрутов в Next.js все еще является экспериментальной, библиотека nextjs-routes предлагает стабильное решение, которое работает как с каталогом приложений, так и со страницами. Следуя приведенным примерам, вы сможете реализовать типизированные маршруты в своих проектах Next.js и насладиться преимуществами безопасности типов в логике маршрутизации.
Не забывайте следить за документацией Next.js и примечаниями к выпуску для получения обновлений о функции типизированных маршрутов по мере её продвижения к стабильности. Счастливого кодинга!
