В Next.js 13 вы можете реализовать страницу-дубликат, используя динамические маршруты. Вместо создания точной копии папок и кода, вы можете создать одну общую компоненту, которая будет использоваться как шаблон для обеих страниц.
Примерный подход к реализации таких страниц будет следующим:
1. Создайте компонент с общей структурой и стилями, который будет использоваться как шаблон для обеих страниц. Этот компонент может называться, например, `LessonPageTemplate`.
2. Создайте компоненты `LessonPage` и `MaterialPage`, которые будут служить точками входа для соответствующих страниц.
3. Используя динамический маршрут Next.js, вы можете передать параметр (например, `slug`) в URL для определения, какую страницу открыть. Для этого вам понадобится создать файл с именем `[slug].js` или `[slug].tsx` внутри папки `pages`, где `slug` представляет собой переменную, которую вы будете использовать для определения отображаемой страницы.
Вот пример кода, который может помочь понять процесс:
1. Создайте компонент `LessonPageTemplate`.
```jsx
import styles from "./LessonPageTemplate.module.css";
export default function LessonPageTemplate({ title, content }) {
return (
<div className={styles.container}>
<h1>{title}</h1>
<div className={styles.content}>{content}</div>
</div>
);
}
```
2. Создайте компоненты `LessonPage` и `MaterialPage`.
```jsx
import LessonPageTemplate from "../components/LessonPageTemplate";
export default function LessonPage() {
const title = "Lesson Page";
const content = "Lesson Page Content";
return <LessonPageTemplate title={title} content={content} />;
}
```
```jsx
import LessonPageTemplate from "../components/LessonPageTemplate";
export default function MaterialPage() {
const title = "Material Page";
const content = "Material Page Content";
return <LessonPageTemplate title={title} content={content} />;
}
```
3. Создайте динамический маршрут `[slug].js` или `[slug].tsx` для обработки обоих страниц.
```jsx
import { useRouter } from "next/router";
import LessonPage from "./LessonPage";
import MaterialPage from "./MaterialPage";
export default function Page() {
const router = useRouter();
const { slug } = router.query;
// Определите, какую страницу отобразить на основе slug
if (slug === "lesson") {
return <LessonPage />;
} else if (slug === "material") {
return <MaterialPage />;
}
return null;
}
```
Теперь, если вы откроете `/lesson` в браузере, будет отображаться страница `LessonPage`, а если вы откроете `/material`, будет отображаться страница `MaterialPage`.
Представленное решение позволяет избежать дублирования кода и структуры папок и предоставляет наиболее эффективное решение для создания двух независимых страниц с одинаковой структурой на Next.js 13 с использованием App Router.
