A feature-rich serverless comment library powered by Supabase or Neon
## See also
- Nexment for Vue.js / Web Component (outdated, still based on Leancloud) [https://github.com/ttttonyhe/nexment-vue](https://github.com/ttttonyhe/nexment-vue)
- Nexment for React.js [https://github.com/ttttonyhe/nexment](https://github.com/ttttonyhe/nexment)
## Installation
### Part I - Backend Setup
Choose **one** of the following backends:
#### Option A — Supabase
1. Create a project on [Supabase](https://supabase.com)
2. Go to **SQL Editor** and run the contents of [`migration/schema.sql`](./migration/schema.sql) to create the `nexment_comments` table
3. Go to **Authentication** → **Providers** → **Email** and disable "Confirm email" (required for admin registration)
4. Go to **Project Settings** → **API** and copy your **Project URL** and **Publishable** key
#### Option B — Neon
1. Create a project on [Neon](https://neon.tech)
2. Enable **Neon Auth** in your project settings
3. Go to **SQL Editor** and run the contents of [`migration/schema-neon.sql`](./migration/schema-neon.sql) to create the `nexment_comments` table with the required RLS policies and role grants
4. Copy your **Auth URL** and **Data API URL** from the Neon project dashboard
### Part II - Nexment
Add Nexment to your project:
```shell
npm install nexment
```
Import and use with **Supabase**:
```jsx
import Nexment from "nexment"
const config = {
pageKey: "xxx", // optional, defaults to window.location.pathname
features: {
linkInput: true,
replyListModal: true,
replyEmailNotifications: true,
descriptionTag: true,
},
supabase: {
url: "https://your-project.supabase.co",
anonKey: "your-anon-key",
},
admin: {
name: "xxx",
email: "xxx@xxx.xxx",
},
blackList: [
{ name: "xxx", email: "xxx", keyword: "xxx", link: "xxx" },
{ keyword: "xxx" },
],
}
;
```
Or with **Neon**:
```jsx
import Nexment from "nexment"
const config = {
pageKey: "xxx",
features: {
linkInput: true,
replyListModal: true,
replyEmailNotifications: true,
descriptionTag: true,
},
neon: {
authUrl: "https://your-project.auth.neon.tech",
dataApiUrl: "https://your-project.data-api.neon.tech",
},
admin: {
name: "xxx",
email: "xxx@xxx.xxx",
},
}
;
```
## Use Nexment in Next.js
Create a wrapper component (using either `supabase` or `neon` config):
```tsx
import Nexment from "nexment"
const NexmentComponent = () => {
const config = {
pageKey: "xxx",
features: {
linkInput: true,
replyListModal: true,
replyEmailNotifications: true,
descriptionTag: true,
},
// Use one of the following:
supabase: {
url: "https://your-project.supabase.co",
anonKey: "your-anon-key",
},
// OR
// neon: {
// authUrl: "https://your-project.auth.neon.tech",
// dataApiUrl: "https://your-project.data-api.neon.tech",
// },
admin: {
name: "xxx",
email: "xxx@xxx.xxx",
},
}
return
}
export default NexmentComponent
```
Import it using `next/dynamic` to disable SSR:
```tsx
import dynamic from "next/dynamic"
const NexmentDiv = dynamic(() => import("./NexmentComponent"), {
ssr: false,
})
const Page = () => {
return (
)
}
export default Page
```
## Email Notifications
Nexment supports email notifications when someone replies to a comment. To enable this, you need to:
1. Set `features.replyEmailNotifications` to `true` in your Nexment config
2. Deploy one of the email endpoint handlers below
3. Point `email.endpoint` in your config to the deployed URL
```jsx
const config = {
features: {
replyEmailNotifications: true,
},
email: {
endpoint: "https://your-domain.com/api/nexment-email",
},
// ... other config
}
```
### Prerequisites
All handlers use [Resend](https://resend.com) to send emails. You'll need:
- A Resend account and API key
- A verified sending domain (or use Resend's sandbox for testing)
| Environment Variable | Description | Required |
| --------------------- | ------------------------------------------------------ | -------------------- |
| `RESEND_API_KEY` | Your Resend API key | Yes |
| `RESEND_FROM_ADDRESS` | Sender address (e.g. `Nexment `) | No (has default) |
| `ALLOWED_ORIGIN` | CORS allowed origin | No (defaults to `*`) |
### Option A — Next.js App Router
Copy [`server/nextjs/app-router.ts`](./server/nextjs/app-router.ts) into your Next.js project as a route handler, for example at `app/api/nexment-email/route.ts`.
### Option B — Next.js Pages Router
Copy [`server/nextjs/pages-router.ts`](./server/nextjs/pages-router.ts) into your Next.js project as an API route, for example at `pages/api/nexment-email.ts`.
### Option C — Cloudflare Worker
Deploy [`server/worker.js`](./server/worker.js) as a Cloudflare Worker. Set `RESEND_API_KEY` and `RESEND_FROM_ADDRESS` as secrets via `wrangler secret put`.
## TypeScript Support
Nexment has full TypeScript type-checking support.
## Migrating from LeanCloud
If you were previously using the LeanCloud-based version of Nexment, follow these steps to migrate your data to Supabase:
### 1. Export your LeanCloud data
Go to your LeanCloud app → **Data Storage** → **Import/Export** → **Export** to download a backup. The backup will contain a `nexment_comments.0.jsonl` file with all your comments.
### 2. Set up the Supabase table
Follow the [Supabase setup instructions](#part-i---supabase) above to create the `nexment_comments` table.
### 3. Run the migration script
```shell
node migration/leancloud-to-supabase.mjs
```
For example:
```shell
node migration/leancloud-to-supabase.mjs ./my-backup ./seed.sql
```
This reads the `nexment_comments.0.jsonl` file from the backup directory and generates a `seed.sql` file containing INSERT statements for all your comments.
### 4. Import the data
Paste the contents of the generated `seed.sql` file into the Supabase **SQL Editor** and run it. All your comments (including reply threading) will be preserved.
### 5. Update your config
Replace the `leancloud` config with `supabase`:
```diff
const config = {
- leancloud: {
- appId: "xxx",
- appKey: "xxx",
- serverURL: "https://xxx",
- },
+ supabase: {
+ url: "https://your-project.supabase.co",
+ anonKey: "your-anon-key",
+ },
admin: {
name: "xxx",
email: "xxx@xxx.xxx",
},
};
```
An example LeanCloud backup is included in the [`backup/`](./backup) directory for reference.
## Contribution
File an issue whenever you encounter a problem, pull requests are always welcomed.
---
_Source: https://npm.io/package/nexment · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
