パッケージのインストールnpm install @prisma/clientスキーマの定義datasource db { provider = "postgresql" url = env("DATASOURCE_URL")}generator client { provider = "prisma-client-js"}model Session { id String @id @default(uuid()) userId Int user User @relation(fields: ) accessToken String ipAddress String? userAgent String? status String? createdAt DateTime @default(now()) updatedAt Da
はじめにShopifyストアのカスタマーがログインできる、Next.jsのクライアントアプリを提供することにした。SSOを実現したかったが、Shopify Plus契約が予算的に難しいため、Auth0によるパスワードレスログインを実装することにした。Auth0 の設定Auth0 ダッシュボードにログインし、パスワードレスログインを有効にします。Authentication > Passwordless に移動し、Email オプションを有効にします。ソースpasswordless-login-pageメールアドレスを入力し、Auth0へ送信するフォームを持つページ'use client';import { useState } from 'react';import Image from 'next/image'import Link from 'next/link'import { Button } fr
はじめにAuth0のユニバーサルログインを使用したログインを実装するpage.tsx以下のコードは、Next.js の App Router 構造（app ディレクトリ）で page.tsx ファイルを使用して、LoginComponent をクライアントサイドでのみレンダリングする実装です。/loginに遷移した時に実行されます。'use client'import dynamic from 'next/dynamic'const LoginComponent = dynamic( () => import('./components/LoginComponent').then((module) => module.default), { ssr: false, })export default function Login() { return ( <> <LoginComponent /> <
layout.tsxlayout.tsx ファイルは、Next.js の App Router 構造における共通のレイアウトコンポーネントです。すべてのページで共通して使用される要素（例えば、ヘッダーやフッター、スタイルの読み込みなど）をこの layout.tsx ファイルで定義します。import './styles/globals.scss'import { Metadata, Viewport } from 'next'import { App } from '@/components/App'import { Toaster } from '@/components/ui/sonner'import { inter } from '@/constants'import { cn } from '@/lib/utils'export const viewport: Viewport = { width: 'device-width'
はじめに以下の主な機能をもつウェブとモバイルのクロスプラットフォームアプリを紹介します。モバイル対応: Capacitor を使って、Android や iOS 向けにも対応可能。ビデオ会議機能: Zoom SDK が含まれているため、遠隔でのビデオ会議や診療が可能。APIデータアクセス: React Query や axios を使って、データアクセス管理がされている。使用している技術スタックNext.js"next": "14.1.3", "react": "^18.2.0", "react-dom": "^18.2.0"React ベースのフレームワークである Next.js を使ってアプリが構築されており、フロントエンドは React で構成されています。Next.js は SSR（サーバーサイドレンダリング）や静的サイト生成が可能なため、パフォーマンスや SEO に優れたアプリです。