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で検証する必要がある その方法…

Aleph.jsというワードを聞いたのでドキュメントを読んで軽くまとめてみた alephjs.org Aleph.jsはNext.jsにインスパイアされたDenoのReactフレームワーク 設定不要で、TypeScript、ESモジュールのインポート、ファイルシステムルーティング、SSRとSSG、 高速…

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…

FlowからTypeScriptに乗り換えていて その際に、Flowで$ValuesはTypeScriptでどうやるのかを調べた 調べた限りではAPIはなく、自作すると以下のようにすると同じようなことができる type $Values<O extends object> = O[keyof O]; const obj = { EN: 'en', JA: 'ja', } as cons</o>…

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 10 からi18n対応したルーティングができるようになったので調査してみた プロジェクトのサイトは多言語対応しているのでありがたい SSR, SSG ページごとに静的生成またはサーバーレンダリングのいずれかを選択できる i18nのget startからダウンロー…

以前Next.jsでsvgを利用する方法は調べた uga-box.hatenablog.com 今度は一つのアイコンが保存されたsvgファイルではなく、複数のアイコンを集めたsvg-spriteをつくってそれを利用したい ただ、結論どうにもうまくいかなかったので代替案を考えた iconコンポ…

StorybookをAppEngineStandardでappspotに公開していたが、使っていないときには落ちるとしてもAppEngineちょっとお高いので Firebase Hostingを利用することにする firebase.google.com Firebase CLIのセットアップ curl -sL https://firebase.tools | bash…

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…

Blitz.jsというものを知ったので調べた blitzjs.com 最初に書かれていること "Zero-API" Data Layer Built on Next.js Inspired by Ruby on Rails つまり、Blitz.jsはRailsをNext.jsとPrismaで再現しようとしているReactフレームワークらしい ちなみに、まだ…

Prismaという技術スタックを聞いて、よく知らなかったので調べた www.prisma.io Prismaはデータベースへのアクセスを容易にするツールセット（ORM） 従来のORMと違うところ 従来のORMはプログラミング言語のモデルクラスにテーブルをマッピングすることによ…

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…

末尾に言語コードがついたID 12345:en や 12345:jaなどがA_TABLEテーブルに格納されている このテーブルから、IDが末尾:enのものを検索して、言語コード部分enを別の言語コードjaに置換してB_TABLEに格納したい つまり、B_TABLEテーブルには英語をコピーした…

TypeScriptを導入して、select要素のonChangeにどういう型を定義するべきかわからなかったので調査した Takepepeさんのこちらの記事が参考になった qiita.com 型推論により、こう定義するのがよいみたいだが type Props = { onClick: (event: React.MouseEve…