nextjs

  • 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(インスペクター)を使う必要があります。今回はその方法を解説します しかしながら、バックエンド上でデバックを使用としてももちろんそのままではできません。