Next.jsとAuth0で会員制メディアを作る【1. 認証編】
こんにちは、柴田です。 今回は「会員制メディア」のチュートリアルを全3回に分けてお届けします。 === 認証編ページ作成編完成編=== 会員制メディアは、一部の記事は会員しか見れないような形式のメディアです。 ビジネスでは近年よくあるユースケースであり、もしかしたら個人ブログに導入してみても一風変わっていて面白いかもしれません。 また、応用すれば課金しないと見れない記事のような仕組みも作れると思います。 今回想定している仕様は以下の通りです。 記事一覧画面と全公開記事（/public配下）は事前生成をしておき、静的に配信する会員向け記事（/private配下）はログイン済みユーザーのみ閲覧可能とし、SSRで配信する Next.jsを用いてJamstackとSSRの合わせ技を行い、認証にはAuth0を用います。 1. Next.jsプロジェクトを用意まずは、Next.jsのプロジェクトを作成
Next.jsのローカル開発環境をDocker + VS Code + Remote Containersで構築 | 電算星組
Next.jsプロジェクト作成 作業端末のターミナルアプリを開き、任意の場所に作業ディレクトリを作成します。 作業ディレクトリをバインドマウントしたNode.jsコンテナを実行して、npx create-next-appでNext.jsプロジェクトを作業ディレクトリに作成します。 このコンテナは--rmオプションを付けて実行しているので、終了と同時に削除されます。 % mkdir sample-app % docker run --rm -it \ -v ${PWD}/sample-app:/app:delegated \ -w /app \ node:16-bullseye-slim \ sh -c "npm install -g npm@latest && npx create-next-app@latest . --ts" (略) Need to install the follow
Next.js, Prisma, PostgreSQL, Dockerによるフルスタックアプリケーションの環境構築 - Qiita
Next.js, Prisma, PostgreSQL, Dockerによるフルスタックアプリケーションの環境構築PostgreSQLDockerdocker-composeNext.jsprisma はじめに 前回、DockerによるNext.jsの環境構築について投稿させていただきました。 本投稿では、さらにPrismaとPostgreSQLを用いて、フルスタックアプリケーションの環境構築について記載させていただきます。 こちらの記事のStep3までを、Dockerを用いた内容に変更して書き起こしております。 前回記事の内容と重複する部分もございますが、大多数の方は前回記事はご覧になられていないと思いますので、初めから順を追って記載させていただこうと思います。 DockerによるNext.jsの環境構築 ここでは、DockerでのNext.js単体の環境構築について記載させていただきま
あなたのプロダクトに Apollo Client は必要ないかもしれない - 一休.com Developers Blog
Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの？ 複雑なアプリケーションには Apollo を使えばいい？ もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか？ 多くの方にとっては Apollo Client ではないかと思います。npm trends を見ても Apollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休
Next.jsのスタンドアロンモードでビルドしたイメージを Cloud Run へデプロイする
module.exports = { - experimental: { - outputStandalone: true, - }, + output: 'standalone', } Next.js の experimental features のひとつに、スタンドアロンモードがあります。 通常モードでは、本番リリース可能なビルドを用意する場合、yarn build による .next/ ディレクトリとあわせて node_modules も含めます。依存関係を解決するために必要ですね。一方スタンドアロンモードを有効にした上で yarn build するとビルド結果が異なります。.next/ディレクトリが作られる点は同じですが、そこにstandaloneディレクトリが追加されます。ここにはアプリを動かすためのファイルが依存関係も含めてすべて入っていて、.next/standalone/
個人開発のサービスをVPSからVercelとCloud Runに移行した話
最近以下のような記事で個人開発のコストの話をよく見かけて、ちょうど自分も個人サービスをコストカットのためにVPSからほぼ無料なスタックに移行していたので構成とかを書いてみる。 前提としてはこんな感じ。 仲間内で使ってるだけのWebアプリケーション。月イチくらいしか使わない 技術スタックは技術的な実験とか学習を兼ねているので多少オーバースペックになるのはいい お金はなるべくかけたくない 移行前のスタック フロントエンドはNuxt.js、Netlify バックエンドはRailsでgRPC、envoyを噛ませてフロントエンドからはgRPC-Webで呼んでる VPS上にバックエンドのアプリケーションとDB（postgres）を動かしてる バックエンドは普通のRailsアプリにしてHerokuにするのが一番楽でお金もかからないんだけど、gRPC-Webを試してみたくて、そうするとproxyが必要にな
React ユーザー向けの Next.js ガイド
最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。 つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材 とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、 ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか 元々は SSR のための煩雑な手続きをしなくてい
Next.jsで静的サイトを作成する際によく使っているライブラリまとめ
この記事は、先日催された「ジャムジャム！！Jamstack_5」で登壇した際の内容を再度まとめたものとなります Next関連 next-seo Seoコンポーネントのようなものが踏襲されてる JSON-LDのサポートも入っていてサポート範囲が広い next-sitemap sitemap.xmlとrobots.txtを作成してくれる 分割もしてくれる configファイルの中で細かい設定ができる pathpida 再生したページのパスの定数ファイルを作ってくれる便利なやつ タイポが無くなって助かる typed-scss-modules CSS Modlesでスタイリングをする際に、.module.(sc|c)ssに対して型定義ファイルを作成してくれる。 宣言漏れや補完など、痒い所に手が届く headlessCMS関連 microcms-js-sdk 最近扱っている案件のheadlessCM
Next.js 12でJestの設定がかなり楽になった
Next.js 12 における Jest サポートの強化 2/18 に Next.js 12.1 がリリースされました。 本バージョンの新機能として「next/jest プラグインを使った Zero-configuration Jest のサポート」が挙げられています。 この新機能自体は Next.js 12.0 の時点からベータ版として利用できるようにはなっていましたが、この度安定版がリリースされた形となります。 next/jest プラグインを使って Next.js アプリのテスト環境を構築する next/jest プラグインを使う方法は以下の２点が挙げられます。 新規でアプリを作る際、時間がないときは１番の方法を取ってもいいでしょう。今回は２番の方法を紹介します。 （テンプレートが TS で書かれているのは地味に嬉しいポイント） create-next-app コマンドでテンプレート
Next.js + TypeScript + Recoil + Herp社ESLint Config でReactチュートリアルを作る。
制作したもの 概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。 （上記のリポジトリにすべてのコードを掲載した。） コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上 である。 改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。 この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React
Next.js の API Routes から SWR の型推論を導く
ファイルシステム API Routes の課題 Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API Routes には対応していません。 useSWR から API Routes の API を呼ぶシーンで期待に沿うものが見当たらなかったので、今回自作してみました（リポジトリはこちら）本サンプルでは、npm script のpostinstallを hook に、src/types/pages/apiに生成ファイルが出力されるので、あらかじめnpm installを実行してお試しください。 サンプルで実現している型推論概要 は
Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
Vercel VercelはNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。 VercelではちょっとしたWeb APIを用意したいときも、/apiディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。 Netlify サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.to
Next.js (React) で BudouX を使って日本語の改行を整える
次に、BudouXを使って、文章を解析して span タグで囲っていきます。 BudouX のパーサー自体は分割した文字列を配列で返してくれるところまでしてくれるので、あとはよしなに map して囲っていく処理を自分で書きます。 この処理はプロジェクトのあらゆる場所で使われることを想定し、 useBudouX() というフックで使えるようにしておきます。 hooks/useBudouX.tsx import { loadDefaultJapaneseParser } from 'budoux' const parser = loadDefaultJapaneseParser() export const useBudouX = () => { const parse = (text: string) => { return parser.parse(text).map((s) => (<s
Next.js 12について本気出して和訳してみた
Next.js 12について本気出して和訳してみた Next.js 12がリリースされました！！！🎉 公式ページは英語となっておりますので、Next.js 12の内容を和訳していきます。 公式ページは以下となっております。 英語が苦手な方はこの記事を参考にしてください！！！ ※本記事で使用している画像は公式ページのものです。 Next.js 12 2021年10月27日(水) Next.js Confで発表したように、Next.js 12は過去最大のリリースとなります。 Rustコンパイラー: Fast Refreshが3倍、そしてビルドが5倍速くなりました。 ミドルウェア(beta): Next.jsの柔軟性を高めるために、設定よりもコードを優先します。 React 18のサポート: ネイティブのNext.jsのAPIがサポートされ、サスペンスもサポートされています。 <Image /
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - KevinBrack/compose-pg: Docker compose template with NextJS Express Postgres and Jenkins
GitHub - FaztWeb/nextjs-postgres-crud-typescript: Nextjs CRUD with PostgreSQL and Typescript with Semantic UI
Next.js, Prisma2, MySQL環境をdockerで作っていく
GitHub - nemanjam/nextjs-prisma-boilerplate: Full stack boilerplate with Next.js, Prisma, Tailwind, TypeScript, Docker, Postgres, documentation, frontend and backend unit and integration tests with Jest, Cypress end-to-end tests, Github Actions CI/CD work
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
Next.jsにおけるenvのベストプラクティス
