Published on2022年11月14日Module not found: Can't resolve 'fs'の対処方法nextjsjavascriptnext.jsを使っていてModule not found: Can't resolve fsが出た時の対処方法を紹介します。とても簡単でnext.config.jsにfallback optionを足してあげれば解決できます。
Published on2022年10月14日nextjsで絶対パスインポートする方法nextjsnext.jsで、コンポーネントやhooksなどをimportする際に、絶対パスやエイリアスを利用する方法を紹介します。とても、シンプルでtypescriptの場合はtsconfig.jsonでjavascriptを使っている場合は、jsconfig.jsonで次のように、指定するとできます。
Published on2022年10月14日next.js eslintで対象とするディレクトリやファイルを変更する方法nextjsNext.jsでeslintがデフォルトでサポートされましたが、デフォルトだとpages以下のファイルだけがlint対象となります。そこで、componentsやhooksなどのディレクトリを新たに追加してそれもlint対象にしたい場合は、次にようにnext.config.jsの設定を変えるとできます。
Published on2022年3月16日vercelとnext.jsでgraphqlのapiサーバをたてる方法typescriptnextjsvercelgraphqlgraphqlのapiを作って、vercelで提供する方法を紹介します。また例ではわかりやすいように、果物を返すAPIとしています。では、まずtypescriptが使えるnext.jsを作ります。npx create-next-app graphql-api --ts次に、yarn add graphql apollo-server-micro micro-cors micro
Published on2021年10月18日Next.jsでLinkを使わずにページ遷移する方法nextjsNext.jsで`a`タグや`Link`を使わずに、Next.jsでページ遷移する方法を紹介します。 とても簡単で`useRouter`を使って、`push`するだけでページ遷移ができてしまいます。
Published on2021年9月2日Next.jsでGoogle Optmizeを使いABテストを実施する方法nextjsNext.jsでGoogle Optmizeを使いABテストをする方法を紹介します。 Next.jsではプリレンダリングの機能によりABテストを実装に苦労します。 ただ、実は簡単でdataLayer.pushをuseEffectで使い、GoogleOptmizeのアクティベーションの設定を変えることで実現することが可能です。
Published on2021年7月3日Next.js next-sitemapでの特定のURLの除外の仕方seonextjsNext.jsのnext-sitemapを使ってsitemapを出力する際に特定のURLを除外する方法を紹介します。 除外する際はexcludeというオプションを指定することで実現することができます。
Published on2021年7月1日Next.jsでjsonを返す静的ページの作り方javascriptnextjsNext.jsで静的なページ(static)なのにまるでapiのようにjsonを返すやり方があります。 それはgetServerSidePropsを使って簡単に実現できます。その実現方法を紹介します。
Published on2021年6月23日Next.jsで特定のページを除外(exclude)したい時のやり方nextjsjavascriptNext.jsでこのページはbuild時、export時に除外したいという場面があるかと思います。 それがそもそもできるのか?そしてやるならどうするのかを紹介したいと思います。
Published on2021年6月2日Next.jsでreact carouselを使う方法javascriptreactnextjsreact 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 on2021年5月26日Next.jsでリロードすると404が出る時の対処法javascriptnextjsnext.jsでexport(SSG)して、hostingしていざサービスを使ってみると、 リンクからたどる際は普通に動くのに、リロードするとなぜか404になる。。。 そんな時の対処方を紹介します。
Published on2021年5月26日Next.jsにsitemapを導入する方法javascriptnextjsNext.jsにsitemapを導入するのはとても簡単で3ステップだけで、インストールして、`next-sitemap.js`のファイルを作成して、あとはpackage.jsonに設定してあげたら動くようになります。
Published on2021年5月25日Next.jsにGoogle Analyticsを導入する方法javascriptnextjsNext.jsにGoogle Analyticsを導入する方法。react-gaを導入しなくてもかなり簡単に設定できます。
Published on2021年5月23日Next.jsでの簡単にできるデバック方法( Node inspectを利用 )nextjsjavascriptnext.jsのフロントエンドでdebug(デバック)をするのは、コード上で`debugger`を埋め込めば、chromeでdebuggerが動きでバックができるようになります。しかし、バックエンド側はそのままだと動かないので、Node.jsのinspect(インスペクター)を使う必要があります。今回はその方法を解説します しかしながら、バックエンド上でデバックを使用としてももちろんそのままではできません。