問題タブ [nextjs]

シンプルな Nextjs ボイラープレートをセットアップしていますが、スタイル付きコンポーネントを動作させることができないようです。私のファイルHeader.tsxでは：

ご覧のとおり、単純なヘッダー コンポーネントをセットアップし、次に styled() を使用して CSS を定義しました。私のファイルIndex.tsxで：

明らかに、私は何か間違ったことをしています。なぜなら、それは機能していないからです。誰かが私を正しい方向に向けることができますか?

私のreactjsプロジェクトでnextjsを使用しています。nextjs では、最初のページのロード時にサーバーエンドで getInitialProps() が呼び出されるため、ローカルストレージにアクセスしてセッションを取得できません。nextjs でセッションを適切に管理するにはどうすればよいでしょうか。

nextとredux-observableを使用して、 react server-side-rendering を実装しようとしていましたが、今は auth を実装したいと思います

サインイン時

• ログインをクリック
  • ディスパッチサインイン
    • ログインタイプを設定する
    • サインイン データの設定
  • バックエンド API の認証/サインインを呼び出す
    • 応答がトークンの有効期限が切れていることを示している場合
      • refreshToken を使用してコール バック API auth/refresh
      • 認証/更新応答トークンに基づいて Cookie を設定する
      • 認証/更新応答に基づいて認証データを設定する
    • そうしないと
      • 認証/サインイン応答トークンに基づいて Cookie を設定する
      • 認証/サインイン応答に基づいて認証データを設定する

認証が必要なページへのアクセスについて

• 呼び出された Cookie を確認しますtoken
  • 存在する場合
    • 認可するためのコール バック API auth/me
    • 応答がトークンの有効期限が切れていることを示している場合
      • refreshToken を使用してコール バック API auth/refresh
      • 認証/更新応答トークンに基づいて Cookie を設定する
      • auth/refresh に基づいて認証データを設定する
    • そうしないと
      • auth/me レスポンスに基づいて認証データを設定する
  • そうしないと
    • サインインにリダイレクト

上記の手順は、次のようにエピック内で行われます

/epics/signin.js

Cookieが保存されるようにするためにいくつかのconsole.log(Cookies.get('token'))ことを行い、そこにあると言ってトークンを正常に出力しましたが、ブラウザーコンソール>アプリケーション> Cookiesで確認したところ、何もありません

したがって、以下の auth epic では、getToken()は常に返さ''れ、常にディスパッチされますauthMeFailure(error)

/epics/auth.js

Cookieの取得と設定にjs-cookieを使用します

編集:次のように、getToken、setToken、removeToken を含む認証ライブラリを実際に準備しました。

はい、setToken()エピックで を使用することもできましたが、Cookie セット メソッドを直接テストしようとしていました。

アップデート：

• コンソール>アプリケーション> Cookiesにないにもかかわらずconsole.log(getToken())、コンポーネントのレンダリングメソッド内で行うと正しいトークンを出力しているため、すべてのページに存在するようです
• しかし、ページを更新するたびに消えてしまいます。変な還元状態で保存されているようなものです

更新＃2：

わかりました私はそれを機能させることができたと思います.2種類のCookie、サーバー側（更新時に生成されるもの）とクライアント側（ナビゲートを持続する）が必要であることが判明したので、私ができなかった理由サーバー側から渡されなかったため、エピックでトークンを取得します（少なくともこれは私の理解です）