Next.js
Next.jsのSSGで事前に生成された静的ページでlocalStorageオブジェクトを使いたい SSGのビルド時ではユーザーのブラウザなど知りようがないので、非同期で参照するようにしないとビルド時にエラーが発生していしまう そこで、useEffectを使って非同期にlocal…
以前にnext-translateを使ってNext.jsアプリの翻訳を行った 【Next.js】next-translateでNext.jsページを翻訳する - UGA Boxxx 【Next.js】next-translateのbuild step以外でNext.jsページを翻訳する - UGA Boxxx このnext-translateで用意するnamespaces fi…
Storybook(v6.1.7)を導入する storybook.js.org 公式にあるコマンドを実行 $ npx sb init 実行すると以下のソースが生成される .storybook ├── main.js └── preview.js src/stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Heade…
以前、Firebase AuthenticationでGoogle認証を行う方法を調べた uga-box.hatenablog.com 今度は認証情報（JWT）を使って更新機能をつくりたい このときAuthorization ヘッダ付与したJWTの検証をFirebase Authentication Adminで検証する必要がある その方法…
Next.jsのAPI Routesを使ってAPIサーバーをつくれることを知った uga-box.hatenablog.com このAPIでのやりとりに際し、認証機能やDBからデータを取得する場合のミドルウェアを考える このときにnext-connectを使うと簡単につくれそうなので調べてみた www.np…
API Routes は、Next.jsを使用してAPIを構築することができる機能 nextjs.org わざわざ別途サーバー用意しなくてもpages/apiにファイルをおくとそれがAPIのエンドポイントURLになるから便利 pages/ ├ blog/ │ └index.tsx ← http://localhost/blog のページ U…
Next.jsにstyled-componentsを導入したい styled-components側にNext.jsへの導入方法がちょろっとだけ書かれている styled-components.com そこにはサーバーサイド側でheadにスタイルを埋め込むため、pages/_document.jsに以下のコードをコピペしろとある ht…
Next.jsでtypescriptを導入したい はじめ方 nextjs.org 空のtsconfig.jsonをプロジェクトのルートに用意し、npm run devを実行するとNext.jsが検知してくれる # You'll see instructions like these: # # Please install typescript, @types/react, and @typ…
ページをローカライズする場合にはGoogleに言語別に翻訳されたページが複数あるということを伝える必要がある uga-box.hatenablog.com やり方は、headに以下を追加する <link rel="alternate" hreflang="lang_code" href="url_of_page" > Next.jsでheadに要素を埋め込むやり方を調査する nextjs.org ドキュメントの例ではnext</link>…
Next.jsで環境変数を扱いたい nextjs.org Next.jsは.env.localというファイルに変数を記載するとそれをprocess.env.に組み込んでくれるようになっているらしいので、例えば .env.localに DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword と記載してお…
サイトが８言語に対応しているが、利用規約やプライバシーポリシーは英語と日本語の２か国語しか用意していない そのため、他言語で利用規約ページに遷移した場合には英語の利用規約ページにリダイレクトさせたい Next.jsでリダイレクトする方法を調べた nex…
next-translateを使ったNext.jsページの翻訳を行った uga-box.hatenablog.com この時は「build step」を使ったが、他にもやりかたもあるようなので調べる https://github.com/vinissimus/next-translate#13-do-i-need-this-build-step-is-there-an-alternati…
Next.js 10 で国際化対応したルーティングはできるようになった uga-box.hatenablog.com 今度はそのlocaleをつかってページの翻訳をしたい Next.jsのリポジトリにnext-translateを使ったサンプルコードがあるので参考にする https://github.com/vercel/next.…
Next.jsとFirebase AuthenticationでGoogle認証を行いたい こちらの記事が参考になった qiita.com 手順 Firebase設定 firebaseのインストール コンテクストを使用して認証済みユーザをコンポーネント間で共有する _app.jsでページ初期化時にAuthProviderをラ…
以前Next.jsでsvgを利用する方法は調べた uga-box.hatenablog.com 今度は一つのアイコンが保存されたsvgファイルではなく、複数のアイコンを集めたsvg-spriteをつくってそれを利用したい ただ、結論どうにもうまくいかなかったので代替案を考えた iconコンポ…
Next.jsでsvgを利用したい Next.jsのリポジトリにsvgを使用するexampleがあるのでそれを参考にする github.com babel-plugin-inline-react-svgのインストール $ npm i -D babel-plugin-inline-react-svg .babelrcに以下を追加する { "presets": [ "next/babe…
Next.jsのgetInitialProps と getStaticProps と getServerSidePropsを調べる この記事が参考になったので個人的まとめ qiita.com getStaticPropsはSSG用のAPIで事前にサーバーサイドで実行される getServerSidePropsはSSR用のAPIでサーバーサイドで実行され…
Next.js 9では、ページ内にgetServerSidePropsとgetInitialPropsが無い場合、ページが静的である（事前にレンダリングできる）と自動的に判断し、サーバーサイドレンダリングと静的事前レンダリングの両方を取り入れた高速のWebサイトを作成することができる…
Next.jsのサンプルコードにある_app.jsと_document.jsが何かを調査した _app.js nextjs.org Next.jsは、Appコンポーネントを使用してページを初期化する これをオーバーライドして、ページの初期化を制御する場合に_app.jsを使う 例えば ページ変更間のレイ…
Next.jsアプリケーションで、以下のコマンドでサーバーを起動した場合のデフォルトのポートは3000番になる npm run dev だが、そのポートは既に利用しているため変えたい ドキュメントは見つからなかったが、issueを探ると https://github.com/vercel/next.j…
Next.jsのサンプルプログラムをローカルで動かしているときにホットリロード機能によってページが更新するためにIntelliJのindexingが動いて作業ができないため抑止したい Project Structure -> Modules を選んで、索引付けしたくないディレクトリをExclude…
Next jsを使用していて一部のページでSSRを無効にしたい 理由としてはモジュールにブラウザでのみ機能するライブラリが含まれているため やり方はコンポーネントを遅延読み込みし、SSRを無効にする方法が公式ドキュメントに記載されている https://nextjs.or…
