Next.js Supabase V3 (#463)
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
This commit is contained in:
Giancarlo Buomprisco
committed by
GitHub
GitHub
parent
4912e402a3
commit
7ebff31475
163
docs/plugins/testimonials-plugin.mdoc
Normal file
163
docs/plugins/testimonials-plugin.mdoc
Normal file
@@ -0,0 +1,163 @@
|
||||
---
|
||||
status: "published"
|
||||
title: 'Testimonials Plugin in the Next.js Supabase SaaS Starter kit'
|
||||
label: 'Testimonials Plugin'
|
||||
order: 3
|
||||
description: 'Learn how to install the Testimonials plugin in the Next.js Supabase SaaS Starter kit.'
|
||||
---
|
||||
|
||||
This plugin allows Makerkit users to easily collect and manage testimonials from their customers. It integrates seamlessly with the existing Makerkit structure and provides both backend and frontend components.
|
||||
|
||||
## Features
|
||||
|
||||
1. Testimonial submission form and manual entry
|
||||
2. Admin panel for managing testimonials
|
||||
3. API endpoints for CRUD operations
|
||||
4. Widgets components for showing testimonials on the website
|
||||
|
||||
## Installation
|
||||
|
||||
To install the plugin, run the following command:
|
||||
|
||||
```bash
|
||||
npx @makerkit/cli plugins add testimonial
|
||||
```
|
||||
|
||||
The codemod will automatically:
|
||||
- Add the `@kit/testimonial` dependency and install packages
|
||||
- Create the translation file at `apps/web/i18n/messages/en/testimonials.json`
|
||||
- Add the `testimonials` namespace to your i18n settings
|
||||
- Add the testimonials sidebar item to the admin panel
|
||||
- Create the Supabase migration file for the testimonials table
|
||||
|
||||
### Run the migrations
|
||||
|
||||
After installation, run the migration and regenerate types:
|
||||
|
||||
```bash
|
||||
pnpm run supabase:web:reset
|
||||
pnpm run supabase:web:typegen
|
||||
```
|
||||
|
||||
The admin pages and sidebar item are automatically set up by the CLI. You can find them at:
|
||||
|
||||
- `apps/web/app/[locale]/admin/testimonials/page.tsx` — Testimonials list
|
||||
- `apps/web/app/[locale]/admin/testimonials/[id]/page.tsx` — Testimonial detail page
|
||||
|
||||
## Displaying the Testimonial Form
|
||||
|
||||
To display the testimonial form on your website, you can import the form component from the plugin and use it in your page.
|
||||
|
||||
Create a new component, and import the form:
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import {
|
||||
TestimonialContainer,
|
||||
TestimonialForm,
|
||||
TestimonialSuccessMessage,
|
||||
VideoTestimonialForm,
|
||||
} from '@kit/testimonial/client';
|
||||
|
||||
export function Testimonial() {
|
||||
const [success, setSuccess] = useState(false);
|
||||
const onSuccess = () => setSuccess(true);
|
||||
|
||||
if (success) {
|
||||
return <SuccessMessage />;
|
||||
}
|
||||
|
||||
return (
|
||||
<TestimonialContainer
|
||||
className={
|
||||
'w-full max-w-md rounded-lg border bg-background p-8 shadow-xl'
|
||||
}
|
||||
welcomeMessage={<WelcomeMessage />}
|
||||
enableTextReview={true}
|
||||
enableVideoReview={true}
|
||||
textReviewComponent={<TestimonialForm onSuccess={onSuccess} />}
|
||||
videoReviewComponent={<VideoTestimonialForm onSuccess={onSuccess} />}
|
||||
textButtonText="Write your thoughts"
|
||||
videoButtonText="Share a video message"
|
||||
backButtonText="Switch review method"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SuccessMessage() {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
'w-full max-w-md rounded-lg border bg-background p-8 shadow-xl'
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col items-center space-y-4 text-center">
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-2xl font-semibold">
|
||||
Thank you for your feedback!
|
||||
</h1>
|
||||
|
||||
<p className="text-muted-foreground">
|
||||
Your review has been submitted successfully.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<TestimonialSuccessMessage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WelcomeMessage() {
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-1 text-center">
|
||||
<h1 className="text-2xl font-semibold">
|
||||
We'd love to hear your feedback!
|
||||
</h1>
|
||||
|
||||
<p className="text-muted-foreground">
|
||||
Your opinion helps us improve our service.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Please customize the components as needed to fit your website's design.
|
||||
|
||||
## API Endpoints
|
||||
|
||||
Please add the GET and POST endpoints to fetch the testimonials at `apps/web/app/api/testimonials/route.ts`:
|
||||
|
||||
```ts
|
||||
import {
|
||||
createTestimonialsRouteHandler,
|
||||
createVideoTestimonialRouteHandler,
|
||||
} from '@kit/testimonial/server';
|
||||
|
||||
export const GET = createTestimonialsRouteHandler;
|
||||
export const POST = createVideoTestimonialRouteHandler;
|
||||
```
|
||||
|
||||
## Widgets
|
||||
|
||||
To display the testimonials on your website, you can use the following widget:
|
||||
|
||||
```tsx
|
||||
import { TestimonialWallWidget } from '@kit/testimonial/widgets';
|
||||
|
||||
export default function TestimonialWidgetPage() {
|
||||
return (
|
||||
<div className={'flex h-full w-screen flex-1 flex-col items-center py-16'}>
|
||||
<TestimonialWallWidget />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Done! You now have a fully functional Testimonial Collection plugin integrated with your Makerkit application.
|
||||
Reference in New Issue
Block a user