nextjs

  • Published on
    Next.js 13.4を使っていて、どこも悪いところがなさそうなのに Uncaught SyntaxError: Unexpected token < webpack.js が出た時の対象方法を紹介します。正直これ直すのに本当に時間がかかりました。。。 私がやった時の原因はmiddleware.tsにありました。 middleware.tsではpathとuserのログインステータスに応じて、 ログインしていない場合はログインページに飛ばすという処理をしていました。
  • Published on
    Eslintでformatに関してはreportしてくれますが、typescriptのtypeエラーは出してくれなかったりします。これらはbuild時に出るエラーで、気軽に確認できると開発が楽になります。そこで、typescriptのtype errorを感知する方法を紹介します。すごく簡単で、yarn run tsc --noemit
  • Published on
    next.jsでrecoil.jsを使っていて下記のようなエラーに遭遇した際の対処方法を紹介します。Expectation Violation: Duplicate atom key foobar. This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.結論から言うと、このエラーはnode.jsの問題であり、無視して構わないものになります。気になる場合は、
  • Published on
    next.jsでpolkadot/extension-dappを使っていて下記のようなエラーが出た場合の対象方法を紹介します。error - ReferenceError: window is not defined polkadot reactこれはpolkadot/extension-dappでは、windowを使いますそのため、 server side renderingでは使えません。next.jsではserver side renderingがされてしまいそのため上記のようなエラーが出てしまいます。そのため、下記のようにdynamic import を使用するか関数内でimportしてあげる必要があります。
  • Published on
    next.jsで、コンポーネントやhooksなどをimportする際に、絶対パスやエイリアスを利用する方法を紹介します。とても、シンプルでtypescriptの場合はtsconfig.jsonでjavascriptを使っている場合は、jsconfig.jsonで次のように、指定するとできます。
  • Published on
    Next.jsでeslintがデフォルトでサポートされましたが、デフォルトだとpages以下のファイルだけがlint対象となります。そこで、componentsやhooksなどのディレクトリを新たに追加してそれもlint対象にしたい場合は、次にようにnext.config.jsの設定を変えるとできます。
  • Published on
    Next.jsでGoogle Optmizeを使いABテストをする方法を紹介します。 Next.jsではプリレンダリングの機能によりABテストを実装に苦労します。 ただ、実は簡単でdataLayer.pushをuseEffectで使い、GoogleOptmizeのアクティベーションの設定を変えることで実現することが可能です。
  • Published on
    react carouselを使おうとしても、Next.jsではそのままでは使えません。 公式ドキュメントの方法だと、Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.というエラーが出てしまいます。その際の解決方法を紹介します。
  • Published on
    Next.jsにsitemapを導入するのはとても簡単で3ステップだけで、インストールして、`next-sitemap.js`のファイルを作成して、あとはpackage.jsonに設定してあげたら動くようになります。
  • Published on
    next.jsのフロントエンドでdebug(デバック)をするのは、コード上で`debugger`を埋め込めば、chromeでdebuggerが動きでバックができるようになります。しかし、バックエンド側はそのままだと動かないので、Node.jsのinspect(インスペクター)を使う必要があります。今回はその方法を解説します しかしながら、バックエンド上でデバックを使用としてももちろんそのままではできません。