3
票
Accepted
引数部分にある波括弧はどういう意味ですか?
分割代入(Destructuring assignment) という 構文 (代入演算子)で, それを利用したものです
// オブジェクトのプロパティーと同じ名前の変数で受け取る
function fn({id}) {
console.log(id); // 123
}
fn({id: 123})
const o = {p: 42, q: true}
// ...
2
票
Accepted
NextJSで使われているのはCommonJS形式, ES Modules形式どちらですか?
import や export の記法自体は、 ESM モジュール方式の記法です。
ただ、それが実際に実行される際にその形式が利用されているかというと違う場合が多く、 NextJS のようなフロントエンドフレームワークの場合、そのコードは実際に実行ないし配布される場合には、 babel や webpack により処理されるのが普通です。
そして babel には、...
2
票
Accepted
next.jsのAPI Routeの意義は?
API Route を使うケース
主に2つあります。
SSR しなくてもよいコンテンツのためのデータ取得
データ更新のための API エンドポイント
SSR しなくてもよいコンテンツのためのデータ取得
初期レンダリングコストを減らすために、クライアントサイドでレンダリングするときに使います。クリックやスクロールといったアクションに応じて API リクエストをして結果を表示します。
SEO ...
1
票
Accepted
Rails API × Next におけるCSRF対策はCORSの設定だけで良いのかどうか
CORSはCSRFの対策にならないという話(あるいはCORSは何でないか)
https://qiita.com/netebakari/items/41baa7e1d0b8d89f9d12
CORSはユーザーの意図しないリクエストを発生させることを防ぐためのものではなく、返ってきた値を邪悪なJavaScriptのコードが参照することを防ぐためのものです。...
1
票
Accepted
Next.jsでJestを使用したテストを行うとエラーがでる
原因は、Example.test.tsxのimport {Example} from "src/components/Example";が解決できてないためです。
以下のようにjest.config.jsへmoduleDirectories: ['node_modules', '<rootDir>/'],を追記してください。
また、import {Example} ...
1
票
Accepted
React/Next.jsで描画している配列に要素を追加するために、再度インスタンス化(useState)した際のパフォーマンスについて
setUsers が呼ばれると、 react のフレームワークは、この Account 関数を再度計算しなおして、それによって得られる element オブジェクトに対して、今度は reconsilation によって既存の dom と差分を検出し、その差分のみを更新する、、みたいなことをやるんだったんじゃないか、と思っています。
なので、この Account が表す dom ...
1
票
Accepted
Firebase環境構築でTypeError: Cannot read property 'apps' of undefinedと出る
firebase SDKのバージョンが9以上ではないですか?
9以上の場合は、初期化の方法が変わっているみたいです。
https://lupas.medium.com/firebase-9-beta-nuxt-js-981cf3dac910
ご参考になれば幸いです。
1
票
Accepted
CSSが適用されない。そもそも参照しているパスが違う。
アクセスしているのは、http://{host name}/out/index.htmlではなく、http://{host name}/index.jsですがあっていますか?
ルートがout/になっていますので、ホスティング先をout/にするかプレフィックスでパスが合うように調整したほうがいいと思います。
Next.jsで静的HTMLエクスポートしたアプリをローカルで確認する方法
...
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 ...
1
票
Accepted
Next.jsやGatsbyのSSGは何をしているのか?
それで私は、SSGではReactを含まないピュアなHTMLが出力されるのだと思っていたのですが、
Reactを含む含まないという話ではなく、生成されたHTML中にどういったscriptタグが埋め込まれているのか着目したほうがよいと思います。読み込まれるJavaScriptによってページの動的な振る舞いが制御されるため、まずは何が読み込まれているのかをしっかりと確認してみてください。...
1
票
Accepted
Next.js内のJSXでmapで二重ループしたい。
類似質問: reactjsでstateの変更ができない
<ul>
{sortedPostData.map(({ id, title }) => (
colorPattern.map((color) => {
<li className={color} key={id}>
...
1
票
配列にオブジェクトを追加したい(forEach, push)
自己解決しました。
pushする前にオブジェクトを作り直せばいけました。
ただ、なぜ作り直さなきゃいけないのかわからないので、もしご存知の方いらっしゃいましたら教えて頂けるとありがたいです。
const data = Object.assign({}, description.current);
array.push(data);
1
票
Next.js+TypeScriptにてgetInitialPropsではなくgetServerSidePropsを使用したいが書き方が分からない。
getServerSidePropsはgetInitialPropsと併用することが出来ません。
(おそらく出来たとしても、2つのソースからのPropsのマージを考えることになり地獄っぽさが増します)
getServerSideProps(と getInitialProps)はpages/以下のファイルよりexportされたものが対象となるため、components/...
1
票
Accepted
Next.jsのgetStaticPaths内でParamsを参照できますでしょうか
getStaticPaths の役割を勘違いしているように思います。
getStaticPaths は next export コマンドで静的サイトとしてアプリを出力する場合に使うもので、URL の可変部分(この例でいうと [prefecture_name_e], [city_name_e] の部分)のバリエーションを Next.js に伝えるためのものです。
Next.js は ...
1
票
Accepted
umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法
質問中の1の方法
グローバルに定義するしか無いようなライブラリがあった場合、基本的にはこの戦略を取ることが多いです。
まさにReactやReactDOMをアプリケーションのコードから分離するような場合と同様に扱うことで依存関係を解決します。
<!-- 外部スクリプトはアプリケーションのコードより前に読み込む -->
<script src="react.js" >
&...
1
票
Accepted
React.jsでコメントアウトができずアロー関数を使った表示ができない
Webサンプルですが、私の方でダウンロードしましたが、問題なく解凍できました。
OS、解凍ソフトは何をお使いですか?
React JSX コメントを書きたい! - かもメモを見ますと、// も使えるが{ }の閉じタグの前に改行が必要。と書いてあります。
{// 一行コメント
}
改行がないと、最後の}もコメントアウトされてエラーになる
{// 一行コメント}
下記のは改行がないようですが、...
Only top scored, non community-wiki answers of a minimum length are eligible