Как использовать стейт менеджер в NextJS для хранения токена авторизации?

Для использования стейт-менеджера в Next.js для хранения токена авторизации, вы можете воспользоваться контекстом (Context API) или библиотекой управления состоянием, такой как Redux или MobX.

Вот пример использования контекста для хранения токена авторизации в Next.js:

1. Создайте файл `AuthContext.js`:

```js
import { createContext, useState, useContext } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [token, setToken] = useState(null);

  const login = (newToken) => {
    setToken(newToken);
  };

  const logout = () => {
    setToken(null);
  };

  return (
    <AuthContext.Provider value={{ token, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};
```

2. Оберните ваше приложение `pages/_app.js` в `AuthProvider`:

```js
import { AuthProvider } from '../AuthContext';

function MyApp({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

export default MyApp;
```

3. Теперь вы можете использовать `useAuth` в ваших компонентах для доступа к токену авторизации и методам login/logout:

```js
import { useAuth } from '../AuthContext';

function MyComponent() {
  const { token, login, logout } = useAuth();

  const handleLogin = () => {
    login('your-auth-token');
  };

  const handleLogout = () => {
    logout();
  };

  return (
    <div>
      {token ? (
        <button onClick={handleLogout}>Logout</button>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

export default MyComponent;
```

Таким образом, вы можете хранить токен авторизации в стейт-менеджере и предотвращать перерисовку всего приложения при обновлении токена.