Next.js
え、起動早くない？ yarn dev実行したところ、サーバーが起動するのが早いなと感じた。 使いたいライブラリめもっとく clsx。これ何回か見たことあるけどいいよね。今度合いそうなプロジェクトあったら使おう。 page.tsxがなるものがページの肝ね ページ作る…
Next.jsをDockerコンテナ化してデプロイする際のDockerfile, docker-composeファイルを残してます。 前提 ローカルの開発環境はDockerで動かさず、デプロイ時のみDockerコンテナを利用するNext.jsのexample with-dockerで使用されているstandalone機能が実験…
Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。 エラー内容 TypeError: Cannot read properties of null (reading 'push') 対処法 対処法はどちらでも問題ないです。 その１：next/linkをモックする jest.mock('n…
作成したnpmライブラリをNext.jsで読み込む時、ReferenceError: document is not definedというエラーに遭いました。 状況 作成していたnpmライブラリは、webpackを使用してバンドルし、そのJSファイルをエンドポイントとしてエクスポートしていました。 使…
自分で作成したライブラリをNext.jsにインストールした際に、Global CSS cannot be imported from within node_modules.というエラーが立ちはだかりました。 エラー内容 Global CSS cannot be imported from within node_modules. つまり、何がNGかというと…
tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを２つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tailwindcssにはパージ機能があり、使用していないクラス名のCSS…
Next.jsで環境変数を読み込むのに手間取ったので備忘録。 環境変数名にNEXT_PUBLIC_をつけているか 環境変数をクライアントサイド（ブラウザ）で使用する場合、変数名ににNEXT_PUBLIC_とつける必要があります。 サーバー側（Node.js環境）で使用する場合には…
eslintを使用しているのですが、Next.jsの_app.tsx内でMyappのエラーが出ていました。その解消方法を記録します。 元のコード ({ Component, pageProps }: AppProps) =>に波線が引かれ、Missing return type on function. が表示されていました。 import { A…
Next.jsを勉強しており、使いどころをはっきりさせたかったため、まとめてみました。 getStaticProps 特徴 ビルド時に、サーバーサイドで実行されるいわゆるSSG（静的生成） 使いどころ リクエストごとにコンテンツが変わったり、頻繁にデータが更新されない…
Tailwind.cssをインストール Next.jsのバージョンが10以上の場合 # npm の場合 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # yarn の場合 yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest Next.jsのバージ…
