次のタグが付いている話題の回答:

3
Accepted

引数部分にある波括弧はどういう意味ですか?

分割代入(Destructuring assignment) という 構文 (代入演算子)で, それを利用したものです // オブジェクトのプロパティーと同じ名前の変数で受け取る function fn({id}) { console.log(id); // 123 } fn({id: 123}) const o = {p: 42, q: true} // ...
oriri's user avatar
  • 5,082
2
Accepted

NextJSで使われているのはCommonJS形式, ES Modules形式どちらですか?

import や export の記法自体は、 ESM モジュール方式の記法です。 ただ、それが実際に実行される際にその形式が利用されているかというと違う場合が多く、 NextJS のようなフロントエンドフレームワークの場合、そのコードは実際に実行ないし配布される場合には、 babel や webpack により処理されるのが普通です。 そして babel には、...
Yuki Inoue's user avatar
  • 1.7万
2
Accepted

next.jsのAPI Routeの意義は?

API Route を使うケース 主に2つあります。 SSR しなくてもよいコンテンツのためのデータ取得 データ更新のための API エンドポイント SSR しなくてもよいコンテンツのためのデータ取得 初期レンダリングコストを減らすために、クライアントサイドでレンダリングするときに使います。クリックやスクロールといったアクションに応じて API リクエストをして結果を表示します。 SEO ...
smagch's user avatar
  • 206
1
Accepted

Rails API × Next におけるCSRF対策はCORSの設定だけで良いのかどうか

CORSはCSRFの対策にならないという話(あるいはCORSは何でないか) https://qiita.com/netebakari/items/41baa7e1d0b8d89f9d12 CORSはユーザーの意図しないリクエストを発生させることを防ぐためのものではなく、返ってきた値を邪悪なJavaScriptのコードが参照することを防ぐためのものです。...
YumaInaura 稲浦悠馬's user avatar
1
Accepted

Next.jsでJestを使用したテストを行うとエラーがでる

原因は、Example.test.tsxのimport {Example} from "src/components/Example";が解決できてないためです。 以下のようにjest.config.jsへmoduleDirectories: ['node_modules', '<rootDir>/'],を追記してください。 また、import {Example} ...
umed0025's user avatar
  • 313
1
Accepted

React/Next.jsで描画している配列に要素を追加するために、再度インスタンス化(useState)した際のパフォーマンスについて

setUsers が呼ばれると、 react のフレームワークは、この Account 関数を再度計算しなおして、それによって得られる element オブジェクトに対して、今度は reconsilation によって既存の dom と差分を検出し、その差分のみを更新する、、みたいなことをやるんだったんじゃないか、と思っています。 なので、この Account が表す dom ...
Yuki Inoue's user avatar
  • 1.7万
1
Accepted

Firebase環境構築でTypeError: Cannot read property 'apps' of undefinedと出る

firebase SDKのバージョンが9以上ではないですか? 9以上の場合は、初期化の方法が変わっているみたいです。 https://lupas.medium.com/firebase-9-beta-nuxt-js-981cf3dac910 ご参考になれば幸いです。
Sora's user avatar
  • 26
1
Accepted

CSSが適用されない。そもそも参照しているパスが違う。

アクセスしているのは、http://{host name}/out/index.htmlではなく、http://{host name}/index.jsですがあっていますか? ルートがout/になっていますので、ホスティング先をout/にするかプレフィックスでパスが合うように調整したほうがいいと思います。 Next.jsで静的HTMLエクスポートしたアプリをローカルで確認する方法 ...
Yuko Kanai's user avatar
1

[Amp Validation for Nextjs]error The parent tag of tag 'style[amp-keyframes]' is 'head', but it can only be 'body'

自己解決しました。 実装ミスでした。 $ROOT/pages/_document.tsxでビルドしたインラインCSSを読み込んでおり、その中にamp系CSSが含まれていた為でした。 以下対象コードです。 # [...] // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import ...
kounetsuman's user avatar
1
Accepted

Next.jsやGatsbyのSSGは何をしているのか?

それで私は、SSGではReactを含まないピュアなHTMLが出力されるのだと思っていたのですが、 Reactを含む含まないという話ではなく、生成されたHTML中にどういったscriptタグが埋め込まれているのか着目したほうがよいと思います。読み込まれるJavaScriptによってページの動的な振る舞いが制御されるため、まずは何が読み込まれているのかをしっかりと確認してみてください。...
himenon's user avatar
  • 1,352
1
Accepted

Next.js内のJSXでmapで二重ループしたい。

類似質問: reactjsでstateの変更ができない <ul> {sortedPostData.map(({ id, title }) => ( colorPattern.map((color) => { <li className={color} key={id}> ...
harry0000's user avatar
  • 2,790
1

配列にオブジェクトを追加したい(forEach, push)

自己解決しました。 pushする前にオブジェクトを作り直せばいけました。 ただ、なぜ作り直さなきゃいけないのかわからないので、もしご存知の方いらっしゃいましたら教えて頂けるとありがたいです。 const data = Object.assign({}, description.current); array.push(data);
demi's user avatar
  • 13
1

Next.js+TypeScriptにてgetInitialPropsではなくgetServerSidePropsを使用したいが書き方が分からない。

getServerSidePropsはgetInitialPropsと併用することが出来ません。 (おそらく出来たとしても、2つのソースからのPropsのマージを考えることになり地獄っぽさが増します) getServerSideProps(と getInitialProps)はpages/以下のファイルよりexportされたものが対象となるため、components/...
Hanakla's user avatar
  • 11
1
Accepted

Next.jsのgetStaticPaths内でParamsを参照できますでしょうか

getStaticPaths の役割を勘違いしているように思います。 getStaticPaths は next export コマンドで静的サイトとしてアプリを出力する場合に使うもので、URL の可変部分(この例でいうと [prefecture_name_e], [city_name_e] の部分)のバリエーションを Next.js に伝えるためのものです。 Next.js は ...
toy's user avatar
  • 81
1
Accepted

umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法

質問中の1の方法 グローバルに定義するしか無いようなライブラリがあった場合、基本的にはこの戦略を取ることが多いです。 まさにReactやReactDOMをアプリケーションのコードから分離するような場合と同様に扱うことで依存関係を解決します。 <!-- 外部スクリプトはアプリケーションのコードより前に読み込む --> <script src="react.js" > &...
himenon's user avatar
  • 1,352
1
Accepted

React.jsでコメントアウトができずアロー関数を使った表示ができない

Webサンプルですが、私の方でダウンロードしましたが、問題なく解凍できました。 OS、解凍ソフトは何をお使いですか? React JSX コメントを書きたい! - かもメモを見ますと、// も使えるが{ }の閉じタグの前に改行が必要。と書いてあります。 {// 一行コメント } 改行がないと、最後の}もコメントアウトされてエラーになる {// 一行コメント} 下記のは改行がないようですが、...
池田茂樹's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible