reactjs - NextJSでTypeScriptとuseContextフックを使って、ReactでJWTをクッキーに適切に保存する方法

ユーザーは設定されており、すべてのページで持続しますが、ブラウザのウィンドウを更新するとユーザーはログアウトされます。問題がクッキーの設定方法にあるのかはわかりません。アドバイスや代替案があれば非常に歓迎します。

こちらが UserContext ファイルです：

import { destroyCookie } from "nookies"; import { setCookie } from "nookies"; import React from "react"; // import { useCookies } from "react-cookie" import cookie from "cookie"; import { Person, tokenAuth } from "../auth"; import { LoginFormValues } from

続きを読む →

TypeScript - NextJSのgetServerSidePropsで初期化前の変数にアクセスできません

私は Firebase を使って作業しており、firebase.tsx で必要なデータを取得するための API と関数を初期化し、その後 pages/index.tsx ファイルでそれらをインポートしていますが、Firebase アプリの初期化後にエクスポートにアクセスできません

services/firebase.tsx:

import firebase, { FirebaseOptions } from 'firebase/app' import { getAuth } from 'firebase/auth'; import { collection, doc, setDoc, getFirestore, query, where, getDocs, orderBy } from "firebase/firestore"; import { getStorage } from 'firebase/storage'; import { getAnalytics } from &quo

続きを読む →

reactjs - 警告: プロパティ `id` が一致しませんでした。NextJS のサーバー

私は自分のプロジェクトの警告を取り除こうとしています：

react-dom.development.js?61bb:67 Warning: Prop `id` did not match. Server: "t4j6jv-aria" Client: "v0lutu9-aria"

残念ながら、問題の原因が全くわかりません。どんな助けでも感謝します。CasinoList.tsx の60行目は次のようになっています：

これは行＃60です：

続きを読む →

reactjs - Yarn と NextJS での Windows ドライブ文字の大文字小文字の無効

今日は私のWindowsマシンで Yarn と NextJS を使って新しいプロジェクトをセットアップしました。起動時に、プロジェクトディレクトリの大文字小文字の扱いが「無効」であるというエラーが発生します。具体的には、次のようなエラーが表示されます:

続きを読む →

TypeScript - NextJSアプリケーションで依存関係のサイクル問題を解決する

私は現在解決に苦労しているNextJSアプリケーション内の依存関係の循環に問題を抱えています。

こちらが私のファイルです。依存関係のサイクルエラーを示しているインポートのみを含めました。

store.ts：

import rootSaga from './sagas/rootSaga';import authSliceStore from './slices/auth/authSlice.store'; // Dependency cycle via ./auth/auth.saga const persistConfig = { key: 'ea-root', version: 1, storage, blacklist: ['authError'], }; export const rootReducer = combineReducers({ auth: authSliceStore, }); const persistedReducer = persistReducer(persistC

続きを読む →

reactjs - nextjs で tsconfig を無視して ES6 を ES5 に強制的にトランスパイルする

Nextjsはコンパイル時にtsconfigのtargetオプションを無視します。ES6のクラスやアロー関数が関数にトランスパイルされます。

next build を実行すると、ターミナルに書き込まれます

info - Using tsconfig file: ./tsconfig.json

そしてパスエイリアスはエラーを引き起こさない。だから私のtsconfigは適用されている。でもNext.jsはすべてのアロー関数、クラスなどをトランスパイルする

// tsconfig.json { "compilerOptions": { "target": "es2020", "lib": [ "webworker", "dom",

続きを読む →

javascript - NextjsをVercelにデプロイする際に TypeError: undefined のプロパティを読み取れません（'name' を読み取り中）

私はTypeErrorを報告する以下のファイルを持っています。

私はNextjsを使用してVercelにアプリケーションをデプロイしようとしています。

TypeError: Cannot read properties of undefined (reading 'name')

以下にコードをご確認ください

import { RawNodeDatum } from 'react-d3-tree/lib/types/common'; interface nodeBFSInterface { name: string; tree: RawNodeDatum | RawNodeDatum[]; newNodeName: string; attributes: { type: string; url?: string | undefined; weight?: number | undefined; }; } function nodeBFS

続きを読む →

webpack - モノレポ: (NextJS 13 + TypeScript) モジュール解析に失敗しました

現在動作している Next.js 13 アプリを単一のモノレポに移行しようとしています。基本的には、npx create-turbo@latest を使って新しいリポジトリを作成し、既存のリポジトリ（仮に「frontend」と呼びます）を apps/ フォルダに移動しました。その後、apps/frontend/package.json に 'ui' 依存関係を追加しました。

{ "name": "frontend", "version": "0.1.0", "private": true, "dependencies": { ... "ui": "*", } ... }

そして、next.conf

続きを読む →

typescript - create-t3-stack（NextJS、NextAuth）でCredentials Providerのセッションが常にnullを返す

なので、データベースのメールとパスワードでログインページを動作させようとしているのですが、値を送信するといつもセッションがnullになります。私がやっていることは次の通りです:

CredentialsProvider({ name: "Credentials", credentials: {}, async authorize(credentials: any) { //check user const user: any = await prisma.user.findUnique({ where: { email: credentials.email, }, }); if (!user) { throw new Error("No user found"); } console.log(&quo

続きを読む →

reactjs - NextJS の useRef の問題をどう解決すればいいですか？

私はNext.jsを使ってSSGページを作っています。Next.jsのタグではなく、タグを書いてmodel-viewerをimportしました。そして、ユーザーがこのページに入ったときにARを自動的に起動したいです。だからuseRefを使ってuseEffect内でactivateAR()を呼びましたが、useRefの値がnullのためにエラーが発生します。

1. 『next/link』を使用すると、最初のエラー -> リフレッシュ？動作します。
2. ブラウザで直接URLを使用するか入力すると、エラーなく動作します。ただし、最初はコンソールウィンドウにnullが表示されます。

私の開発者としての道に光を当ててください。👼

ああ、このページは動的ルーティングを使ったSSGです。

const viewer = useRef<any>(null); useEffect(()=>{ function loadArFile() { viewer.current?.activate

続きを読む →