TypeScript で ES Module を import を絶対パスで参照するやり方です。 絶対パスで import 文を書くと以下のようになります。 import { Heading } from '../../../components/common/Typography'; import { UserTypes } from '../../../constant… read more

Next.js (React)でモーダルやページ内でステップを表示する際に別の内容を表示しようとする際に、リロードやブラウザバックにより、その状態を保持したり、ユーザが思ったような挙動をしたい場合、location.replace メソッドを使って、ページ遷移をせず、その状態をブラウザに保持することができます。 例えば以下のようにモーダルが開いているような UI の場合、通常は js 内の変数(s… read more

The TL;DR: Next.js の Link component と chakraUI の Link component を利用するときは hrefPass を利用します。 import NextLink from 'next/link'; import { Link } from '@chakra-ui/react'; <NextLink href=… read more

Next.js で UI をそんなにこだわらない静的ページ(例えばヘルプページやプライバシーポリシーなど）やブログのような記事を開発者以外が編集するような場合、基本的には React で書くよりマークダウンを使って記述し、それを表示した方が早いことがあります。 React で作られたメインのコンテンツとは別にマークダウンをベースにした静的ページを Next.js 上につくりたい場合以下のやり方で実… read more

また Amplify ネタ。 AWS Amplify で next.js(SSR)を利用した frontend の場合、現状 basic 認証が利用できません。 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/server-side-rendering-amplify.html#access-control-unsupporte… read more

AWS Amplify + Cognito + Next.js で認証付きページ(ログインが必要なページ)を作る方法です。 モチベ やりたいこと とあるプロダクトの管理画面を作りたい 管理画面はプロダクトサイトとは別の場所(ドメイン)で作成し、プロダクトサイトと切り離す。 管理ユーザ用のテーブルは作りたくない 認証機能を 0 から作るのは面倒なので、Cognito の認証機能を利用したい。（UI… read more

Stripe の API を Next.js で動かしてみた備忘録です。 準備 Stripe の Business アカウントを取得。 https://dashboard.stripe.com/register Next.js をインストールし、Stripe のライブラリをインストールする。 # node.js用ライブラリ npm install --save stripe # react及びフロ… read more

create-next-app とかよりもっとプレーンな Next.js の環境をサクッと作りたい場合。 ディレクトリを作成して、、 mkdir next-app && cd next-app # もしくは take next-app 以下のコマンドを実行 npm init -y npm install next react react-dom npm install types… read more

Next.js(React)で多言語対応をしたい場合、isaachinman/next-i18nextなどのライブラリはありますが、ちょっと多機能すぎて、ブラックボックスな部分が多いと感じたので、簡単に自作してみることにしました。 準備 とりあえず Next.js の環境を用意します。 $ npx create-next-app demo --use-npm --example "&lt… read more