nextjs

Next.js 13.4を使っていて、どこも悪いところがなさそうなのに Uncaught SyntaxError: Unexpected token < webpack.js が出た時の対象方法を紹介します。正直これ直すのに本当に時間がかかりました。。。 私がやった時の原因はmiddleware.tsにありました。 middleware.tsではpathとuserのログインステータスに応じて、 ログインしていない場合はログインページに飛ばすという処理をしていました。

Eslintでformatに関してはreportしてくれますが、typescriptのtypeエラーは出してくれなかったりします。これらはbuild時に出るエラーで、気軽に確認できると開発が楽になります。そこで、typescriptのtype errorを感知する方法を紹介します。すごく簡単で、yarn run tsc --noemit

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の問題であり、無視して構わないものになります。気になる場合は、

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してあげる必要があります。

next.jsを使っていてModule not found: Can't resolve fsが出た時の対処方法を紹介します。とても簡単でnext.config.jsにfallback optionを足してあげれば解決できます。

next.jsで、コンポーネントやhooksなどをimportする際に、絶対パスやエイリアスを利用する方法を紹介します。とても、シンプルでtypescriptの場合はtsconfig.jsonでjavascriptを使っている場合は、jsconfig.jsonで次のように、指定するとできます。

Next.jsでeslintがデフォルトでサポートされましたが、デフォルトだとpages以下のファイルだけがlint対象となります。そこで、componentsやhooksなどのディレクトリを新たに追加してそれもlint対象にしたい場合は、次にようにnext.config.jsの設定を変えるとできます。

graphqlのapiを作って、vercelで提供する方法を紹介します。また例ではわかりやすいように、果物を返すAPIとしています。では、まずtypescriptが使えるnext.jsを作ります。npx create-next-app graphql-api --ts次に、yarn add graphql apollo-server-micro micro-cors micro

Next.jsで`a`タグや`Link`を使わずに、Next.jsでページ遷移する方法を紹介します。 とても簡単で`useRouter`を使って、`push`するだけでページ遷移ができてしまいます。

Next.jsでGoogle Optmizeを使いABテストをする方法を紹介します。 Next.jsではプリレンダリングの機能によりABテストを実装に苦労します。 ただ、実は簡単でdataLayer.pushをuseEffectで使い、GoogleOptmizeのアクティベーションの設定を変えることで実現することが可能です。

Next.jsのnext-sitemapを使ってsitemapを出力する際に特定のURLを除外する方法を紹介します。 除外する際はexcludeというオプションを指定することで実現することができます。

Next.jsで静的なページ(static)なのにまるでapiのようにjsonを返すやり方があります。 それはgetServerSidePropsを使って簡単に実現できます。その実現方法を紹介します。

Next.jsでこのページはbuild時、export時に除外したいという場面があるかと思います。 それがそもそもできるのか？そしてやるならどうするのかを紹介したいと思います。

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.というエラーが出てしまいます。その際の解決方法を紹介します。

next.jsでexport（SSG）して、hostingしていざサービスを使ってみると、 リンクからたどる際は普通に動くのに、リロードするとなぜか404になる。。。 そんな時の対処方を紹介します。

Next.jsにsitemapを導入するのはとても簡単で3ステップだけで、インストールして、`next-sitemap.js`のファイルを作成して、あとはpackage.jsonに設定してあげたら動くようになります。

Next.jsにGoogle Analyticsを導入する方法。react-gaを導入しなくてもかなり簡単に設定できます。

next.jsのフロントエンドでdebug(デバック)をするのは、コード上で`debugger`を埋め込めば、chromeでdebuggerが動きでバックができるようになります。しかし、バックエンド側はそのままだと動かないので、Node.jsのinspect(インスペクター)を使う必要があります。今回はその方法を解説します しかしながら、バックエンド上でデバックを使用としてももちろんそのままではできません。