Next.jsとAuth0で会員制メディアを作る【1. 認証編】
こんにちは、柴田です。 今回は「会員制メディア」のチュートリアルを全3回に分けてお届けします。 === 認証編ページ作成編完成編=== 会員制メディアは、一部の記事は会員しか見れないような形式のメディアです。 ビジネスでは近年よくあるユースケースであり、もしかしたら個人ブログに導入してみても一風変わっていて面白いかもしれません。 また、応用すれば課金しないと見れない記事のような仕組みも作れると思います。 今回想定している仕様は以下の通りです。 記事一覧画面と全公開記事（/public配下）は事前生成をしておき、静的に配信する会員向け記事（/private配下）はログイン済みユーザーのみ閲覧可能とし、SSRで配信する Next.jsを用いてJamstackとSSRの合わせ技を行い、認証にはAuth0を用います。 1. Next.jsプロジェクトを用意まずは、Next.jsのプロジェクトを作成
Reactのベストプラクティスとコード削減パターン - パート2
本記事は React best practices and patterns to reduce code - Part2 を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の第2パートとなる記事です。 パート1パート2（この記事）パート3 時間を無駄にしないために早速Reactのベストプラクティスとコード削減についてみていきましょう。まずは最も一般的な内容から始めます。 コンポーネントが子要素を持たない場合はself-closing tagするよくないコード： return <Component></Component>よいコード： return <Component />
Reactのベストプラクティスとコード削減パターン - パート1
本記事は React best practices and patterns to reduce code を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の第1パートとなる記事です。 パート1（この記事）パート2パート3 私は数年に渡っていくつかのプロジェクトで、React.jsを使った取り組みに参加してきました。様々なプロジェクトに取り組む中でいくつかの共通するパターンを見出したため本ブログでご紹介いたします。それではいきましょう。 1. reduxのactionsとdispatcherのためにカスタムフックを作成する私はreduxを使うことを好んではいませんが、いくつ
Cypressで始めるReactのE2Eテスト-導入から実際にテストを書いてみよう！
こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで、フロントエンド(React)のE2Eテストについてご紹介します。 Cypressとは？ Cypressはブラウザでのテスト作業を自動化するテストフレームワークです。オープンソースできています。 これまでのE2EテストはSeleniumが主流でしたが、最近はCypressも勢いを増しています。 また、Cypress DashboardというSaaSもあるので、これらをうまく組み合わせることでチームでのテスト効率をあげることに繋がります。 今回はCypressを使ってフロントエンド(R
Next.js(SSG)でページネーションを実装してみよう
本記事ではNext.js(SSG)でページネーションを実装していきます。以前に書いたmicroCMS + Next.jsでJamstackブログを作ってみようの拡張版になります。本記事はこのチュートリアルを終えてる前提で話を進めていきます。 今回の作成イメージはmicroCMSブログのコンテンツ一覧の下部にあるページネーションです。 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 13.1.1react 18.2.0react-dom 18.2.0 コンポーネントの作成はじめに、ページネーションを作成するためのベースとなるコンポーネントを作成します。components/Pagination.jsを作成してください。 こちらはコードの全体像です。 //components/Pagination.js import Link f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
