Работаю с Next.js 14+ и пытаюсь реализовать параллельные маршруты, так чтобы модальное окно отображалось поверх страницы CRM при переходе на маршрут /crm/message. Я хочу, чтобы модалка рендерилась на переднем плане, а основная страница оставалась на фоне, возможно, с эффектом блюра. <br/><br/><b>Структура проекта:</b> <br/><pre><code>app
└── crm
├── layout.tsx // Layout для CRM и модалки
├── page.tsx // Основная страница CRM
└── @modal
└── message
└── page.tsx // Контент модалки для /crm/message
├── default.tsx</code></pre> <br/><br/> При переходе на /crm/message модальное окно отображается, но фон остается пустым, и страница CRM не выводится. На странице /crm всё работает корректно. Я пробовал разные варианты структурирования маршрутов, но все еще сталкиваюсь с ошибкой 404 или отсутствием рендера основной страницы. <br/><br/> layout.tsx: <br/><pre><code>export default function CRMLayout({ children, modal }: { children: React.ReactNode; modal: React.ReactNode }) {
return (
<>
{children}
{modal}
</>
);
}</code></pre>
В Next.js 14 при использовании параллельных маршрутов важно правильно настроить структуру вашего проекта и убедиться, что вы корректно передаете компоненты для отображения. Ваша текущая структура проекта выглядит в целом правильно, но у вас могут быть проблемы с тем, как вы обрабатываете `children` и `modal` в вашем `layout.tsx`.
Вот пример того, как вы можете реализовать параллельный роутинг с модальным окном, отображающимся над основной страницей:
1. **Структура проекта**:
Убедитесь, что у вас структура папок именно такая:
```
app
└── crm
├── layout.tsx
├── page.tsx
└── @modal
└── message
└── page.tsx
└── default.tsx
```
2. **layout.tsx**:
Измените ваш `layout.tsx`, чтобы он корректно обрабатывал как основной контент, так и модальные окна. Например:
```tsx
export default function CRMLayout({ children, modal }: { children: React.ReactNode; modal?: React.ReactNode }) {
return (
<>
<div className="main-content">
{children}
</div>
{modal && (
<div className="modal-overlay">
{modal}
</div>
)}
<style jsx>{`
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.main-content {
filter: blur(2px); /* Эффект размытия фона */
}
`}</style>
</>
);
}
```
3. **page.tsx** (основная страница CRM):
Убедитесь, что у вас есть контент в `page.tsx`, который будет отображаться в `children`:
```tsx
export default function CRMPage() {
return (
<div>
<h1>CRM Page</h1>
{/* Другой контент страницы CRM */}
</div>
);
}
```
4. **page.tsx для модального окна**:
Убедитесь, что ваш модальный файл отображается корректно:
```tsx
export default function MessageModal() {
return (
<div className="modal-content">
<h2>Message Modal</h2>
{/* Другой контент модалки */}
</div>
);
}
```
5. **Путь к маршруту**:
Убедитесь, что вы используете правильный путь для загрузки вашего модального окна. Для `/crm/message` оно должно автоматически обрабатывать загрузку модального окна из `@modal/message/page.tsx`.
6. **Проверка на ошибки**:
Если вы все еще получаете 404 или другие ошибки, проверьте, что маршруты настроены правильно и что все необходимые зависимости установлены. Убедитесь, что у вас нет ошибок в консоли браузера, которые могут указывать на проблемы с рендерингом.
С помощью этих шагов ваш параллельный роутинг должен работать в Next.js 14, и модальные окна будут отображаться с размытием фона как вы ожидали.
Это работает совсем не так. В вашей структуре @modal - это слот в layout, у него нет отдельного URL.
However, slots are not route segments and do not affect the URL structure. For example, for /@analytics/views, the URL will be /views since @analytics is a slot.https://nextjs.org/docs/app/building-your-applicat...
Вам же нужно читать следующий раздел на этой же странице: https://nextjs.org/docs/app/building-your-applicat...