ウェブサイト検索
javascript - NextJS Reactアプリのスタイル付きコンポーネントが正しくレンダリングされない: 警告: Prop `className` が一致しませんでした
私の NextJS アプリの _app.tsx では、トップメニューのナビボタンのスタイルを変更してレンダリングするために、import Router from 'next/router' を使用しています。
パスが / のときはレンダリングが動作しますが、/about にいるときはレンダリングが動作せず、次のエラーが表示されます。ブール論理は正しく動作しているにもかかわらずです。
エラー：
警告: プロパティ className が一致しませんでした。サーバー: "nav__NavActive-sc-6btkfp-2 gJVDzS nav__NavLink-sc-6btkfp-1 bvpMWI" クライアント: "nav__NavLink-sc-6btkfp-1 bvpMWI"
以下のスクリーンショットでは、私は現
続きを読む →express - TypeScript と webpack で NextJs + ExpressJs を使えない
私はExpressJsをTypeScriptでセットアップして、InversifyJSとNextjsでIOCを使用したいです。また、webpackを使ってバンドルしたいです。サーバーサイドレンダリングを行うためにserver.tsでNextをインポートする必要があるので、Nextjs用にTypeScriptも設定しましたが、クライアントフォルダの.jsと.jsxファイルではES6の構文を使えるようにしたいです。
しかし、Next.js のコードをコンパイルすると何かがうまくいきませんでした。（server.ts で Next を使用しない場合は、正しく動作します）
webpack.c
続きを読む →reactjs - React TypescriptアプリケーションをNextjsに変換する
私はNextjsには初心者で、Reactjs + Typescriptを使ってウェブアプリケーションを作成しました。そして、これをNextjsに変換したいと思っています。どのファイルがどこに行くかというファイル構造やインストール部分について混乱しています。現在のウェブアプリケーション（ReactjsとTypescript）は、データベース（Postdb）や以下のような機能を持っています:
- 新しいノートを作成する
- そのメモにコメントする
- そのノートを好きになったり嫌いになったりする。
この既存のプロジェクトをスムーズにNext.jsに変換する方法は
続きを読む →reactjs - NextJS: 既存の asPath に新しいクエリストリングの値を追加する、または既存のクエリストリングを更新する
NextJSのルーターシステムがどのように機能するのか、ちょっと分からなくなっています：
私は次のようなカテゴリー別の記事を持っています:
Medical Charity Wedding Funeral私はナビゲーションバーを持っており、ユーザーは記事をカテゴリ別に表示したり、キーワードで検索したりすることができます。カテゴリ機能は完全に機能しています。
これが私のナビバーの見た目です。
つまり、ユーザーが
続きを読む →reactjs - なぜこの場合、NextJSでsetStateが動作しなかったのですか？
こんにちは、皆さん！ 私には問題があります - 私の NextJS + TS アプリケーションで setState が動作しません。 ReactHooks を使って状態を試しましたが、何も動きませんでした。コンポーネントをクラスに変更しましたが、やはり動きませんでした。 新しく作成した CRA アプリケーション（TSなし）でこのコンポーネントを実行してみました。そこではすべてうまく動作しました。
このコンポーネントは配列を props 経由で受け取り、それをボタンとしてレンダリングします。 State には cur
続きを読む →typescript - Nextjs のパス名のクエリパラメータがデコードされている
私たちは、アプリケーションをナビゲートするためにURLを使用してAPIからいくつかのデータを取得しています。リンクコンポーネントでは、<Link href={{ pathname: url , someOtherProperty }} /> のようにURLを渡しており、そのURLは /path-to-page?query=value のようになっています。しかしクライアントで確認すると、URLが /path-to-page%3Fquery=value のように返されているのが見えます。<Link href={url}
続きを読む →reactjs - Nextjsで保存時にTypeScriptの型エラーを表示する方法
私は Nextjs の TypeScript プロジェクトで作業しており、型エラーが他の種類のエラーのようにアプリの実行を止めないことに気づきました。それは私にとって問題ですが、さらに大きな問題は TypeError がビルド時に発生し、デプロイを行う必要があるときに主に型エラーを発見することになる点です。
開発中にTypeScriptのエラーがアプリの実行を停止させる方法はありますか？これを実現するにはどの設定を使えばよいですか？
それは私のtsconfig.jsonです
{ "compilerOptions": { "target": "es2020", "lib": [ "dom", "dom.iterable", "esnext" ], 続きを読む →next.js - NxワークスペースでNextJSアプリケーションを構築している間に、エラーが発生しました: モジュール 'typescript' が見つかりません
新しい @nrwl/workspace を作成して Next JS アプリを作成しているときに、エラーが発生します: Error: Cannot find module 'typescript'. 同じ問題に遭遇した人はいますか？
ステップ -
- 新しい nx ワークスペースを作成する
- NextJS プリセットで新しいアプリを作成する
- nx run <app-name>:build でアプリをビルドします
- dist/apps/<app-name> から画像を生成するか、単に dist をどこかにコピーしてください
- yarn または npm install を実行してください
- モジュールがインストールされた後、yarn start でアプリケーションを起動します
発生するエラー
続きを読む →typescript - NextJsアプリケーションで単一のJSONファイルに対してresolveJsonModuleを無効にするにはどうすればよいですか？
私はNext.jsのアプリケーションを構築しており、Vercelでデプロイしています。これまではすべて順調に動作していましたが、最近、大きなJSONファイルにいくつかの変更を加えたところ、そのサイズが約20％増加しました。サイズの増加が何らかの制限を超えたようで、現在、TypeScriptの型解決に起因すると思われるWebpack 5のエラーが発生しています。
私は JSON ファイルを import で直接インポートしています。私が集められた情報によると、tsconfig.json の resolveJsonModule コンパイラオプションが、webpack に対して JSON ファイルの型をその場で解決しようと指示する役割を果たしているようです。そのため、おそらく JSON ファイルを正しく操作しているかを確認できるのでしょう。
実際のところ、このファイルはかなり簡単なものです。以下のような、比較的シンプルな FoodItem オブジェクトの配列に過ぎません（以下は例示です）：
import allFoodOriginal 続きを読む →reactjs - Nextjs コンポーネントをカスタムプロパティ付きで Children として渡す方法
コンポーネントにプロパティ Auth を追加するために、インターフェースを作成しました
interface AuthAppProps extends Omit<AppProps, "Component"> { Component: AppProps["Component"] & { Auth: boolean }; }私が演奏できるように
const App: React.FC<AuthAppProps> = (props) =>{ const { Component, pageProps: { session, ...pageProps }, } = props; return ( <SessionProvider session={session}> {Component.Auth ? ( <Auth 続きを読む →