nhost
Nhostは、PostgreSQLなどを活用したオープンソースのバックエンドプラットフォームで、認証機能やデータベース構築などを支援し、GraphQL APIの自動生成やSDKを通じて開発者が効率的にアプリケーションを構築するSkill。
📜 元の英語説明(参考)
Expert guidance for Nhost, the open-source backend platform built on PostgreSQL, Hasura GraphQL, and serverless functions. Helps developers set up authentication, database, file storage, and real-time subscriptions with auto-generated GraphQL APIs and a developer-friendly SDK.
🇯🇵 日本人クリエイター向け解説
Nhostは、PostgreSQLなどを活用したオープンソースのバックエンドプラットフォームで、認証機能やデータベース構築などを支援し、GraphQL APIの自動生成やSDKを通じて開発者が効率的にアプリケーションを構築するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nhost.zip https://jpskill.com/download/15170.zip && unzip -o nhost.zip && rm nhost.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15170.zip -OutFile "$d\nhost.zip"; Expand-Archive "$d\nhost.zip" -DestinationPath $d -Force; ri "$d\nhost.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
nhost.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
nhostフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Nhost — GraphQL を備えたオープンソースの Firebase の代替
概要
Nhost は、PostgreSQL、Hasura GraphQL、およびサーバーレス関数上に構築されたオープンソースのバックエンドプラットフォームです。開発者が認証、データベース、ファイルストレージ、およびリアルタイムサブスクリプションを、自動生成された GraphQL API と開発者フレンドリーな SDK でセットアップするのを支援します。
手順
プロジェクトのセットアップ
# Nhost CLI をインストール
npm install -g nhost
# 新しいプロジェクトを作成
nhost init my-app
cd my-app
# ローカル開発を開始 (Docker ベース)
nhost up
# ダッシュボード: http://localhost:1337
# GraphQL: http://localhost:1337/v1/graphql
# Auth: http://localhost:1337/v1/auth
認証
// src/lib/nhost.ts — Nhost クライアントの設定
import { NhostClient } from "@nhost/nhost-js";
export const nhost = new NhostClient({
subdomain: process.env.NEXT_PUBLIC_NHOST_SUBDOMAIN!,
region: process.env.NEXT_PUBLIC_NHOST_REGION!,
});
// メールでサインアップ
async function signUp(email: string, password: string) {
const { session, error } = await nhost.auth.signUp({
email,
password,
options: {
displayName: "New User",
metadata: { plan: "free" },
},
});
if (error) throw new Error(error.message);
return session;
}
// メールでサインイン
async function signIn(email: string, password: string) {
const { session, error } = await nhost.auth.signIn({ email, password });
if (error) throw new Error(error.message);
return session;
}
// OAuth (Google, GitHub など)
async function signInWithGoogle() {
const { providerUrl } = await nhost.auth.signIn({
provider: "google",
});
window.location.href = providerUrl!;
}
// マジックリンク (パスワードレス)
async function sendMagicLink(email: string) {
await nhost.auth.signIn({ email });
}
// 認証状態
nhost.auth.onAuthStateChanged((event, session) => {
console.log(`Auth event: ${event}`, session?.user?.email);
});
GraphQL API (PostgreSQL から自動生成)
// src/lib/graphql.ts — 自動生成された GraphQL API をクエリ
import { gql } from "graphql-tag";
// Nhost は PostgreSQL テーブルから GraphQL を自動生成します
// ダッシュボードで "posts" テーブルを作成 → 即座に GraphQL CRUD
// 投稿をクエリ
const GET_POSTS = gql`
query GetPosts($limit: Int!, $offset: Int!) {
posts(
limit: $limit
offset: $offset
order_by: { created_at: desc }
where: { published: { _eq: true } }
) {
id
title
content
created_at
author {
displayName
avatarUrl
}
}
posts_aggregate(where: { published: { _eq: true } }) {
aggregate {
count
}
}
}
`;
// 投稿を挿入
const CREATE_POST = gql`
mutation CreatePost($title: String!, $content: String!) {
insert_posts_one(object: {
title: $title
content: $content
published: false
}) {
id
title
}
}
`;
// リアルタイムサブスクリプション
const SUBSCRIBE_POSTS = gql`
subscription OnNewPosts {
posts(
order_by: { created_at: desc }
limit: 10
where: { published: { _eq: true } }
) {
id
title
created_at
author {
displayName
}
}
}
`;
// クエリを実行
async function getPosts(page = 1, pageSize = 20) {
const { data, error } = await nhost.graphql.request(GET_POSTS, {
limit: pageSize,
offset: (page - 1) * pageSize,
});
if (error) throw error;
return data;
}
ファイルストレージ
// Nhost Storage 経由でファイルをアップロードおよび管理
async function uploadAvatar(file: File, userId: string): Promise<string> {
const { fileMetadata, error } = await nhost.storage.upload({
file,
bucketId: "avatars",
name: `${userId}/avatar.${file.name.split('.').pop()}`,
});
if (error) throw new Error(error.message);
return nhost.storage.getPublicUrl({ fileId: fileMetadata!.id });
}
async function uploadDocument(file: File) {
const { fileMetadata, error } = await nhost.storage.upload({
file,
bucketId: "documents",
});
if (error) throw new Error(error.message);
// 署名付き URL を取得 (プライベートファイル用)
const { presignedUrl } = await nhost.storage.getPresignedUrl({
fileId: fileMetadata!.id,
});
return presignedUrl;
}
サーバーレス関数
// nhost/functions/send-welcome-email.ts — サーバーレス関数
import { Request, Response } from "express";
export default async function handler(req: Request, res: Response) {
if (req.method !== "POST") {
return res.status(405).json({ error: "Method not allowed" });
}
const { email, name } = req.body;
await sendEmail({
to: email,
subject: `Welcome, ${name}!`,
html: `<h1>Welcome to our platform, ${name}!</h1>`,
});
res.json({ success: true });
}
// 呼び出し先: https://your-app.nhost.run/v1/functions/send-welcome-email
Hasura 権限 (行レベルセキュリティ)
# Hasura Console またはメタデータ経由で設定
# nhost/metadata/databases/default/tables/public_posts.yaml
table:
name: posts
schema: public
select_permissions:
- role: user
permission:
columns: [id, title, content, created_at, published, author_id]
filter:
_or:
- published: { _eq: true }
- author_id: { _eq: X-Hasura-User-Id }
insert_permissions:
- role: user
permission:
columns: [title, content, published]
set:
author_id: X-Hasura-User-Id
update_permissions:
- role: user
permission:
columns: [title, content, published]
filter:
author_id: { _eq: X-Hasura-User-Id }
インストール
# クライアント SDK
npm install @nhost/nhost-js
# React 統合
npm install @nhost/react @nhost/react-apollo
# CLI
npm install -g nhost
例
例 1: カスタム構成で Nhost をセットアップする
ユーザーリクエスト:
Nhost をインストールしました。好みのキーバインドで TypeScript + React ワークフロー用に構成するのを手伝ってください。
エージェントは TypeScri で構成ファイルを作成します
(原文がここで切り詰められています)
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Nhost — Open-Source Firebase Alternative with GraphQL
Overview
Nhost, the open-source backend platform built on PostgreSQL, Hasura GraphQL, and serverless functions. Helps developers set up authentication, database, file storage, and real-time subscriptions with auto-generated GraphQL APIs and a developer-friendly SDK.
Instructions
Project Setup
# Install Nhost CLI
npm install -g nhost
# Create a new project
nhost init my-app
cd my-app
# Start local development (Docker-based)
nhost up
# Dashboard: http://localhost:1337
# GraphQL: http://localhost:1337/v1/graphql
# Auth: http://localhost:1337/v1/auth
Authentication
// src/lib/nhost.ts — Nhost client configuration
import { NhostClient } from "@nhost/nhost-js";
export const nhost = new NhostClient({
subdomain: process.env.NEXT_PUBLIC_NHOST_SUBDOMAIN!,
region: process.env.NEXT_PUBLIC_NHOST_REGION!,
});
// Sign up with email
async function signUp(email: string, password: string) {
const { session, error } = await nhost.auth.signUp({
email,
password,
options: {
displayName: "New User",
metadata: { plan: "free" },
},
});
if (error) throw new Error(error.message);
return session;
}
// Sign in with email
async function signIn(email: string, password: string) {
const { session, error } = await nhost.auth.signIn({ email, password });
if (error) throw new Error(error.message);
return session;
}
// OAuth (Google, GitHub, etc.)
async function signInWithGoogle() {
const { providerUrl } = await nhost.auth.signIn({
provider: "google",
});
window.location.href = providerUrl!;
}
// Magic link (passwordless)
async function sendMagicLink(email: string) {
await nhost.auth.signIn({ email });
}
// Auth state
nhost.auth.onAuthStateChanged((event, session) => {
console.log(`Auth event: ${event}`, session?.user?.email);
});
GraphQL API (Auto-Generated from PostgreSQL)
// src/lib/graphql.ts — Query the auto-generated GraphQL API
import { gql } from "graphql-tag";
// Nhost auto-generates GraphQL from your PostgreSQL tables
// Create a table "posts" in the dashboard → instant GraphQL CRUD
// Query posts
const GET_POSTS = gql`
query GetPosts($limit: Int!, $offset: Int!) {
posts(
limit: $limit
offset: $offset
order_by: { created_at: desc }
where: { published: { _eq: true } }
) {
id
title
content
created_at
author {
displayName
avatarUrl
}
}
posts_aggregate(where: { published: { _eq: true } }) {
aggregate {
count
}
}
}
`;
// Insert a post
const CREATE_POST = gql`
mutation CreatePost($title: String!, $content: String!) {
insert_posts_one(object: {
title: $title
content: $content
published: false
}) {
id
title
}
}
`;
// Real-time subscription
const SUBSCRIBE_POSTS = gql`
subscription OnNewPosts {
posts(
order_by: { created_at: desc }
limit: 10
where: { published: { _eq: true } }
) {
id
title
created_at
author {
displayName
}
}
}
`;
// Execute queries
async function getPosts(page = 1, pageSize = 20) {
const { data, error } = await nhost.graphql.request(GET_POSTS, {
limit: pageSize,
offset: (page - 1) * pageSize,
});
if (error) throw error;
return data;
}
File Storage
// Upload and manage files via Nhost Storage
async function uploadAvatar(file: File, userId: string): Promise<string> {
const { fileMetadata, error } = await nhost.storage.upload({
file,
bucketId: "avatars",
name: `${userId}/avatar.${file.name.split('.').pop()}`,
});
if (error) throw new Error(error.message);
return nhost.storage.getPublicUrl({ fileId: fileMetadata!.id });
}
async function uploadDocument(file: File) {
const { fileMetadata, error } = await nhost.storage.upload({
file,
bucketId: "documents",
});
if (error) throw new Error(error.message);
// Get a presigned URL (for private files)
const { presignedUrl } = await nhost.storage.getPresignedUrl({
fileId: fileMetadata!.id,
});
return presignedUrl;
}
Serverless Functions
// nhost/functions/send-welcome-email.ts — Serverless function
import { Request, Response } from "express";
export default async function handler(req: Request, res: Response) {
if (req.method !== "POST") {
return res.status(405).json({ error: "Method not allowed" });
}
const { email, name } = req.body;
await sendEmail({
to: email,
subject: `Welcome, ${name}!`,
html: `<h1>Welcome to our platform, ${name}!</h1>`,
});
res.json({ success: true });
}
// Called at: https://your-app.nhost.run/v1/functions/send-welcome-email
Hasura Permissions (Row-Level Security)
# Configure in Hasura Console or via metadata
# nhost/metadata/databases/default/tables/public_posts.yaml
table:
name: posts
schema: public
select_permissions:
- role: user
permission:
columns: [id, title, content, created_at, published, author_id]
filter:
_or:
- published: { _eq: true }
- author_id: { _eq: X-Hasura-User-Id }
insert_permissions:
- role: user
permission:
columns: [title, content, published]
set:
author_id: X-Hasura-User-Id
update_permissions:
- role: user
permission:
columns: [title, content, published]
filter:
author_id: { _eq: X-Hasura-User-Id }
Installation
# Client SDK
npm install @nhost/nhost-js
# React integration
npm install @nhost/react @nhost/react-apollo
# CLI
npm install -g nhost
Examples
Example 1: Setting up Nhost with a custom configuration
User request:
I just installed Nhost. Help me configure it for my TypeScript + React workflow with my preferred keybindings.
The agent creates the configuration file with TypeScript-aware settings, configures relevant plugins/extensions for React development, sets up keyboard shortcuts matching the user's preferences, and verifies the setup works correctly.
Example 2: Extending Nhost with custom functionality
User request:
I want to add a custom authentication to Nhost. How do I build one?
The agent scaffolds the extension/plugin project, implements the core functionality following Nhost's API patterns, adds configuration options, and provides testing instructions to verify it works end-to-end.
Guidelines
- PostgreSQL = your database — Nhost uses real PostgreSQL; use migrations, write raw SQL when needed, use Hasura for the GraphQL layer
- Permissions via Hasura — Define row-level security in Hasura; every table needs permissions before it's accessible via GraphQL
- Real-time with subscriptions — Use GraphQL subscriptions for live data; Nhost/Hasura handles WebSocket connections automatically
- Local development first —
nhost upruns everything locally with Docker; match production exactly in development - Migrations for schema changes — Use Hasura migrations (auto-generated) to version database changes; apply in CI/CD
- Storage buckets for organization — Create separate buckets for avatars, documents, public assets; set permissions per bucket
- Serverless for custom logic — Use Nhost Functions for webhooks, email sending, and business logic that doesn't fit in Hasura
- Self-host for control — Nhost is open-source; self-host with Docker Compose for full infrastructure control