kyohei's blog

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

body parser https://github.com/koajs/bodyparser json, form , text , xml での body をパースするのに必要。 import Koa from 'koa'; import bodyParser from 'koa-bodyparser'; const app = new Koa(); app.… 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

forever を利用して daemon で起動しているアプリケーションのログを CloudWatch に流す方法です。 forever のログファイル forever はアプリケーション起動時にデフォルトで ~/.forever 以下に a93c.log のようなランダムなファイル名のログファイルを出力します。 今回は CloudWatch Agent で取得するためファイル名を固定します。 f… read more

node.js のアプリケーションを EC2 へ自動デプロイする方法です EC2 側の設定 EC2 に CodeDeploy-Agent をインストール https://docs.aws.amazon.com/codedeploy/latest/userguide/codedeploy-agent-operations-install-linux.html こちらを参考に CodeDeploy-A… read more

TypeScript でライブラリ内や自動的に生成された型定義で、配列の要素がオブジェクトであるときに、その要素が型として定義されていない場合があります。この型を呼出したり型として再定義する方法です。 export type Animals = { name: string; size: number }[]; // または exportされていない場合 type Animals = { na… 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

zora core をローカルのチェーン(Ganashe)で動かす方法です。 clone, install git clone git@github.com:ourzora/core.git cd core yarn env ファイルの作成 ルートディレクトリに.env.localを作成。RPC_ENDPOINT と PRIVATE_KEY を設定する。 RPC_ENDPOINT は Ganac… read more