Как реализовать авторизацию в приложении на Next.js?

Авторизация в приложении на Next.js с использованием собственного бэкенда может быть реализована несколькими способами, однако подход с использованием access и refresh токенов является одним из наиболее часто рекомендуемых. Вот основные шаги, которые помогут вам организовать этот процесс:

### Шаги для реализации авторизации с токенами в Next.js:

1. **Создание страницы входа**:
   - Создайте компонент для входа, который будет собирать данные от пользователя (например, имя пользователя и пароль). 

2. **Отправка запроса на бэкенд**:
   - При отправке формы входа сделайте POST-запрос на ваш бэкенд для аутентификации и получения токенов. Обычно это делается с использованием библиотеки `axios` или встроенного `fetch`.

3. **Хранение токенов**:
   - После получения access и refresh токенов, вы можете сохранить их в `localStorage` или `sessionStorage` на клиенте для последующих запросов. Однако, для улучшенной безопасности рекомендуется использовать куки с настройками `HttpOnly` (чтобы предотвратить доступ к токенам через JavaScript).
   - Для хранения токенов в куках вы можете использовать пакет `cookie` или `js-cookie`.

4. **Создание API маршрутов**:
   - В Next.js вы можете создавать API маршруты в папке `pages/api`. Создайте обработчик, который будет проверять токены перед обработкой запросов.

5. **Настройка Middleware для защиты страниц**:
   - Используйте middlewareNext.js для проверки токенов при доступе к защищённым страницам. Вы можете проверить существование refresh токена и, при необходимости, обновлять access токен.

6. **Выход из приложения**:
   - Создайте метод для выхода, который будет очищать токены из хранилища или куков.

### Примерный код:

Вот примерный код на входе с использованием `axios` и токенов:

```jsx
// pages/login.js
import { useState } from 'react';
import axios from 'axios';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/api/login', { email, password });
      const { accessToken, refreshToken } = response.data;

      // Сохраняем токены в локальное хранилище
      localStorage.setItem('accessToken', accessToken);
      localStorage.setItem('refreshToken', refreshToken);

      // Перенаправление на защищенную страницу
      window.location.href = '/protected';
    } catch (error) {
      console.error('Ошибка входа:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="Email" 
        required 
      />
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
        placeholder="Пароль" 
        required 
      />
      <button type="submit">Войти</button>
    </form>
  );
}
```

### Ресурсы для изучения:

1. **Next.js Documentation**: [Authentication](https://nextjs.org/docs/authentication) - ознакомьтесь с их ресурсами по авторизации.
2. **Пакеты**:
   - `next-auth` - это библиотека, которая может помочь организовать авторизацию, если вам нужно много готовых решений. Однако, если у вас есть собственный бэкенд, вам может подойти использовать только `axios`.
3. **Статьи и видео**:
   - Поиск по запросам: "Next.js Authentication JWT", "Next.js access refresh token" на YouTube или Medium может привести к полезным материалам.

Если у вас есть особые вопросы по какому-либо из пунктов, не стесняйтесь спрашивать!