setQuery(e.target.value)}
/>
);
}
```
In this example, the `useQueryState` hook from nuqs is used to manage a single URL search parameter with type-safe parsing. The `setQuery` function updates the `query` URL parameter whenever the input value changes.
### Benefits
* **Simplified State Management**: NUQS simplifies state management by using URL search parameters, making it easy to share and persist state across different parts of your application.
* **SEO-Friendly**: By using URL search parameters, NUQS helps improve the SEO of your application by making the state accessible through the URL.
* **Easy Integration**: NUQS is easy to integrate into your existing React application, providing a seamless experience for managing URL search parameters.
For more information and detailed documentation, visit the [NUQS website](https://nuqs.47ng.com/).
---
For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)
For an index of all available documentation, see [/llms.txt](/llms.txt)
---
title: React Wrap Balancer
description: A simple React component that makes titles more readable
type: integration
summary: How to add balanced text wrapping with React Wrap Balancer.
---
# React Wrap Balancer
### Installation
To install `react-wrap-balancer`, simply run the following command:
Search Query: {query}
{count}
{/* Your avatar */}
);
}
```
### Multiplayer documents
You can take your collaborative app a step further, and set up multiplayer document state with [`useStorage`](https://liveblocks.io/docs/api-reference/liveblocks-react#useStorage) and [`useMutation`](https://liveblocks.io/docs/api-reference/liveblocks-react#useMutation). This is ideal for creating custom experiences, such as a a multiplayer drawing panel, spreadsheet, or just a simple shared input and that anyone can edit.
```tsx title="collaborative-input.tsx"
import { useStorage, useMutation } from "@liveblocks/react/suspense";
function CollaborativeInput() {
// Get the input's value
const inputValue = useStorage((root) => root.inputValue);
// Set the input's value
const setValue = useMutation(({ storage }, newValue) => {
storage.set("inputValue", newValue);
}, []);
return setValue(e.target.value)} />;
}
```
### Commenting
Liveblocks also provides ready-made customizable components for adding collaboration, such as [`Thread`](https://liveblocks.io/docs/api-reference/liveblocks-react-ui#Thread) and [`Composer`](https://liveblocks.io/docs/api-reference/liveblocks-react-ui#Composer).
```tsx title="comments.tsx"
import { useThreads } from "@liveblocks/react/suspense";
import { Thread, Composer } from "@liveblocks/react-ui";
function Comments() {
// Get each thread of comments and render them
const { threads } = useThreads();
return (
{threads.map((thread) => (
);
}
```
### Collaborative editing
To add a rich-text editor with full collaborative editing and floating comments, you can set up a [Tiptap](https://liveblocks.io/docs/get-started/nextjs-tiptap) or [Lexical](https://liveblocks.io/docs/get-started/nextjs-lexical) editor in a few lines of code.
```tsx title="collaborative-editor.tsx"
import { useLiveblocksExtension, FloatingComposer, FloatingThreads } from "@liveblocks/react-tiptap";
import { useThreads, useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
export function Editor() {
const { threads } = useThreads();
const liveblocks = useLiveblocksExtension();
// Set up your multiplayer text editor
const editor = useEditor({
extensions: [
liveblocks,
StarterKit.configure({ history: false }),
],
immediatelyRender: false,
});
return (
Analytics feature is enabled
;
}
```
Because feature flags are tied to the user, they only work if the user is signed in. Otherwise, the flag will always return `false`.
## Overriding flags in development
You can override flags in development by using the Vercel Toolbar. Simply open the toolbar by clicking the "Flag" icon in the top right and then selecting the flag you'd like to override.
Upload Your Avatar
{blob && (
Blob url: {blob.url}
)}
);
}
```
---
For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)
For an index of all available documentation, see [/llms.txt](/llms.txt)
---
title: Toolbar
description: next-forge uses the Vercel Toolbar to allow you to override feature flags in development.
product: Toolbar
type: reference
summary: How the Vercel Toolbar overrides feature flags in development.
related:
- /docs/packages/flags
---
# Toolbar
The [Vercel Toolbar](https://vercel.com/docs/workflow-collaboration/vercel-toolbar) is a tool that allows you to leave feedback, navigate through important dashboard pages, share deployments, use Draft Mode for previewing unpublished content, and Edit Mode for editing content in real-time. next-forge has the Vercel Toolbar enabled by default.
## Link your applications
Go into each application and run `vercel link`, like so:
```sh title="Terminal"
cd apps/app && vercel link && cd ../..
cd apps/web && vercel link && cd ../..
cd apps/api && vercel link && cd ../..
```
This will create a `.vercel/project.json` file in each application.
## Add the environment variable
Then, simply add a `FLAGS_SECRET` environment variable to each application's `.env.local` file, like so:
```js title=".env.local"
FLAGS_SECRET="test"
```
These two steps are optional, but they are recommended to ensure that the Vercel Toolbar is enabled in each application.
---
For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)
For an index of all available documentation, see [/llms.txt](/llms.txt)
---
title: Environment Variables
description: How to configure environment variables in next-forge.
type: reference
summary: How environment variables are configured and used across the monorepo.
prerequisites:
- /docs/setup/installation
---
# Environment Variables
next-forge uses environment variables for configuration. This guide will help you set up the required variables to get started quickly, and optionally configure additional features.
All integration environment variables are **optional** — next-forge will gracefully skip any integration that isn't configured. The only truly required variables are for core infrastructure (database and URLs).
## Quick Start (Minimum Setup)
To get next-forge running locally with basic functionality, you only need to configure these **required** variables:
### 1. Database (Required)
Add to `packages/database/.env`:
```bash
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
```
-
{toc.map((item) => (
- {item.title} ))}
{pages?.map((page) => (
);
};
```
{page.title}
))}
{pages.map((page) => (
);
};
export default App;
```
## 9. Replace Prisma Studio
Delete the now unused Prisma Studio app:
```sh title="Terminal"
rm -rf apps/studio
```
To manage your data, use the [Convex Dashboard](https://dashboard.convex.dev) which provides a data browser, function logs, and deployment management.
## 10. Deploy
When deploying your app, set the `NEXT_PUBLIC_CONVEX_URL` environment variable in your hosting provider (e.g. Vercel). You can find this URL in your [Convex Dashboard](https://dashboard.convex.dev) under your project's settings.
To deploy your Convex functions to production, run:
```sh title="Terminal"
npx convex deploy
```
This deploys your schema and server functions to your production Convex instance.
---
For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)
For an index of all available documentation, see [/llms.txt](/llms.txt)
---
title: Switch to Drizzle
description: How to change the ORM to Drizzle.
type: integration
summary: How to switch the ORM to Drizzle.
prerequisites:
- /docs/packages/database
related:
- /docs/migrations/database/prisma-postgres
---
# Switch to Drizzle
Drizzle is a brilliant, type-safe ORM growing quickly in popularity. If you want to switch to Drizzle, you have two options:
1. Keep Prisma and add the Drizzle API to the Prisma client. Drizzle have a [great guide](https://orm.drizzle.team/docs/prisma) on how to do this.
2. Go all-in and switch to Drizzle.
Here, we'll assume you have a working Neon database and cover the second option.
{page.title}
))}
{JSON.stringify(store, null, 2)}
);
};
```
---
For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)
For an index of all available documentation, see [/llms.txt](/llms.txt)
---
title: Switch to Paddle Billing
description: How to change the default payment processor to Paddle Billing.
type: integration
summary: How to switch the payment processor to Paddle Billing.
prerequisites:
- /docs/packages/payments
related:
- /docs/migrations/payments/lemon-squeezy
---
# Switch to Paddle Billing
[Paddle Billing](https://www.paddle.com/) is a merchant of record for selling digital products and subscriptions. It takes care of payments, global tax compliance, fraud prevention, localization, and subscriptions. Here's how to switch the default payment processor from Stripe to Paddle Billing.
I'm using CSS Variables!
I'm using styles directly from the Tailwind config!