Как создать модальное окно в Next.js с использованием параллельных маршрутов, чтобы оно оставалось открытым даже при перезагрузке страницы?

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

### Шаги для создания модального окна

1. **Настройка маршрутов**: Используйте динамические маршруты в Next.js, чтобы управлять состоянием открытого окна. Например, вы можете использовать URL-параметры для контроля состояния модального окна.

2. **Использование состояния приложения**: Храните состояние открытия модального окна в контексте, что позволит вам использовать его на любом уровне вашего приложения.

3. **Выбор локального хранилища или URL**: Используйте `localStorage` или URL-параметры для сохранения состояния модального окна таким образом, чтобы оно сохранялось даже после перезагрузки страницы.

### Пример кода

#### 1. Создайте контекст для модального окна.

```javascript
// ModalContext.js
import { createContext, useContext, useState } from 'react';

const ModalContext = createContext();

export const ModalProvider = ({ children }) => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <ModalContext.Provider value={{ isOpen, setIsOpen }}>
            {children}
        </ModalContext.Provider>
    );
};

export const useModal = () => {
    return useContext(ModalContext);
};
```

#### 2. Создайте модальное окно.

```javascript
// Modal.js
import { useEffect } from 'react';
import { useModal } from './ModalContext';

const Modal = () => {
    const { isOpen, setIsOpen } = useModal();

    const closeModal = () => {
        setIsOpen(false);
        window.history.pushState({}, document.title, window.location.pathname);
    };

    useEffect(() => {
        const handleRouteChange = () => {
            setIsOpen(false);
        };

        window.addEventListener('popstate', handleRouteChange);

        return () => {
            window.removeEventListener('popstate', handleRouteChange);
        };
    }, [setIsOpen]);

    if (!isOpen) return null;

    return (
        <div className="modal">
            <h2>Модальное окно</h2>
            <button onClick={closeModal}>Закрыть</button>
        </div>
    );
};

export default Modal;
```

#### 3. Включите модальное окно в ваш компонент страницы.

```javascript
// pages/[productId].js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { ModalProvider, useModal } from '../components/ModalContext';
import Modal from '../components/Modal';

const ProductPage = () => {
    const router = useRouter();
    const { setIsOpen } = useModal();

    useEffect(() => {
        const { query } = router;
        if (query.modal === 'open') {
            setIsOpen(true);
        }
    }, [router.query]);

    const openModal = () => {
        setIsOpen(true);
        router.push(`?modal=open`, undefined, { shallow: true });
    };

    return (
        <div>
            <h1>Страница продукта</h1>
            <button onClick={openModal}>Открыть модальное окно</button>
            <Modal />
        </div>
    );
};

const PageWithModal = () => (
    <ModalProvider>
        <ProductPage />
    </ModalProvider>
);

export default PageWithModal;
```

### Объяснение кода

1. **Контекст модального окна**: Мы создали `ModalContext`, который хранит состояние модального окна (открыто оно или закрыто).
2. **Модальное окно**: Компонент `Modal` использует `useEffect`, чтобы отслеживать изменения маршрута и закрывать окно, когда пользователь нажимает кнопку "Назад".
3. **Страница продукта**: Компонент `ProductPage` управляет состоянием модального окна и изменяет URL с помощью `router.push`, чтобы сохранить его открытым даже при перезагрузке.

### Заключение

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

How to Create Modals with Unique Routes in Next.js... 
 Parallel Routes - Modals 
 Parallel route modal using Next.js 
 Так же, можно писать в состояние->localStorage isOpenModal, если при загрузки страницы оно true - сразу показываем окно.