Next.js

Next.js

Next.js14のチュートリアルやってみて思ったことを書きなぐる

え、起動早くない? yarn dev実行したところ、サーバーが起動するのが早いなと感じた。 使いたいライブラリめもっとく clsx。これ何回か見たことあるけどいいよね。今度合いそうなプロジェクトあったら使おう。 page.tsxがなるものが...
Docker

Next.jsをDockerコンテナでデプロイする

Next.jsをDockerコンテナ化してデプロイする際のDockerfile, docker-composeファイルを残してます。 前提 ローカルの開発環境はDockerで動かさず、デプロイ時のみDockerコンテナを利用するNext.j...
JavaScript

【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’)

Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。 エラー内容 TypeError: Cannot read properties of null (reading &...
Next.js

【npmライブラリ作成×webpack×Next.js】ReferenceError: document is not defined

作成したnpmライブラリをNext.jsで読み込む時、ReferenceError: document is not definedというエラーに遭いました。 状況 作成していたnpmライブラリは、webpackを使用してバンドルし、そのJ...
Next.js

【npmライブラリ作成/Next.js】Global CSS cannot be imported from within node_modules.

自分で作成したライブラリをNext.jsにインストールした際に、Global CSS cannot be imported from within node_modules.というエラーが立ちはだかりました。 エラー内容 Global CS...
HTML/CSS/Sass

本番環境にデプロイしたらTailwind CSSが効かない時に確認すること

tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを2つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tailwindcss...
Next.js

Next.jsで環境変数が読み込まれないときに確認すること

Next.jsで環境変数を読み込むのに手間取ったので備忘録。 環境変数名にNEXT_PUBLIC_をつけているか 環境変数をクライアントサイド(ブラウザ)で使用する場合、変数名ににNEXT_PUBLIC_とつける必要があります。 サーバー側...
Next.js

【Next.js×TypeScript】_app.tsx内のMyAppの型定義でエラーが出る

eslintを使用しているのですが、Next.jsの_app.tsx内でMyappのエラーが出ていました。その解消方法を記録します。 元のコード ({ Component, pageProps }: AppProps) =>に波線が引かれ、...
Next.js

【Next.js】データ取得時の、getStaticProps, getServerSideProps, SWRの使い分け

Next.jsを勉強しており、使いどころをはっきりさせたかったため、まとめてみました。 getStaticProps 特徴 ビルド時に、サーバーサイドで実行されるいわゆるSSG(静的生成) 使いどころ リクエストごとにコンテンツが変わったり...
HTML/CSS/Sass

Next.jsにTailwind.cssを導入する方法

Tailwind.cssをインストール Next.jsのバージョンが10以上の場合 # npm の場合 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest...
スポンサーリンク