```
--------------------------------
### Markdown Code Block Example
Source: https://github.com/vercel/next-forge/blob/main/apps/docs/essentials/code.mdx
Demonstrates how to render a fenced code block within Markdown. This is useful for displaying code examples directly in documentation.
```markdown
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
```
--------------------------------
### Initialize Next-Forge Project
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/examples/ai-chatbot.mdx
Use this command to create a new Next.js project with next-forge, setting up the basic structure and dependencies for your application.
```bash
npx next-forge@latest init ai-chatbot
```
--------------------------------
### Scaffold Database with Prisma
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/setup/installation.mdx
Use this command to scaffold the database using the schema defined in `packages/database/prisma/schema.prisma`. Refer to the Database Configuration Guide for details on the default Prisma configuration.
```bash
npm run migrate
```
--------------------------------
### Create New Documentation Page
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/apps/docs.mdx
Add a new MDX file to the `apps/docs` directory to create a documentation page. The file name becomes the page slug, and frontmatter defines page metadata.
```mdx
---
title: 'Quickstart'
description: 'Start building modern documentation in under five minutes.'
---
```
--------------------------------
### Get Resolved Theme with useTheme Hook
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/packages/design-system/dark-mode.mdx
Use the useTheme hook from next-themes to get the currently resolved theme. This is useful for conditionally rendering UI elements based on the active theme.
```tsx
import { useTheme } from 'next-themes';
const MyPage = () => {
const { resolvedTheme } = useTheme();
return resolvedTheme === 'dark' ? 'Dark mode baby' : 'Light mode ftw';
}
```
--------------------------------
### Install Novu Dependencies
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/notifications/novu.mdx
Add the new Novu notification dependencies to the notifications package.
```bash
npm install @novu/api @novu/react --filter @repo/notifications
```
--------------------------------
### Install Convex Dependency
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/database/convex.mdx
Add the Convex package to your project's database package.
```bash
npm install convex --filter @repo/database
```
--------------------------------
### Uninstall Neon Dependencies
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/database/convex.mdx
Remove existing Neon and Prisma related packages before installing Convex.
```bash
npm uninstall @neondatabase/serverless @prisma/adapter-neon @prisma/client prisma ws @types/ws --filter @repo/database
```
--------------------------------
### Inline Code Example
Source: https://github.com/vercel/next-forge/blob/main/apps/docs/essentials/code.mdx
Use backticks (`) to denote inline code like `word` or `phrase`.
```markdown
To denote a `word` or `phrase` as code, enclose it in backticks (`).
```
--------------------------------
### Install Hypertune Dependencies
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/flags/hypertune.mdx
Replace existing analytics dependencies with Hypertune and server-only packages in the feature-flags package.
```package-install
npm uninstall @repo/analytics --filter @repo/feature-flags
npm install hypertune server-only --filter @repo/feature-flags
```
--------------------------------
### Set up Hypertune Client Instance
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/flags/hypertune.mdx
Define a getHypertune function to initialize and configure the Hypertune SDK on the server, including user context and Vercel overrides.
```ts
import 'server-only';
import {
auth
} from '@repo/auth/server';
import {
noStore
} from 'next/cache';
import type {
ReadonlyHeaders
} from 'next/dist/server/web/spec-extension/adapters/headers';
import type {
ReadonlyRequestCookies
} from 'next/dist/server/web/spec-extension/adapters/request-cookies';
import {
createSource
} from '../generated/hypertune';
import {
getVercelOverride
} from '../generated/hypertune.vercel';
import {
keys
} from '../keys';
const hypertuneSource = createSource({
token: keys().NEXT_PUBLIC_HYPERTUNE_TOKEN,
});
export default async function getHypertune(params?: {
headers?: ReadonlyHeaders;
cookies?: ReadonlyRequestCookies;
}) {
noStore();
await hypertuneSource.initIfNeeded(); // Check for flag updates
const { userId,
orgId,
sessionId
} = await auth();
// Respect flag overrides set by the Vercel Toolbar
hypertuneSource.setOverride(await getVercelOverride());
return hypertuneSource.root({
args: {
context: {
environment: process.env.NODE_ENV,
user: {
id: userId ?? '',
sessionId: sessionId ?? ''
},
org: {
id: orgId ?? ''
},
},
},
});
}
```
--------------------------------
### Get file metadata
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/storage/appwrite.mdx
Retrieves metadata for a specific file, including its name, size, and MIME type.
```APIDOC
## Get file metadata
### Description
Fetches metadata for a given file.
### Method
`storage.getFile(bucketId, fileId)`
### Parameters
#### Path Parameters
- **bucketId** (string) - Required - The ID of the bucket where the file is stored.
- **fileId** (string) - Required - The ID of the file to retrieve metadata for.
### Request Example
```ts
import { storage, bucketId } from '@repo/storage';
const file = await storage.getFile(bucketId, 'file-id');
console.log(file.name); // Original filename
console.log(file.sizeOriginal); // File size in bytes
console.log(file.mimeType); // MIME type
```
### Response
#### Success Response (200)
- **name** (string) - The original filename.
- **sizeOriginal** (integer) - The file size in bytes.
- **mimeType** (string) - The MIME type of the file.
```
--------------------------------
### Build and Run Docker Image
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/deployment/docker.mdx
Commands to build a Docker image for a specific Next.js app (e.g., 'app') and run it, mapping the container's port 3000 to the host's port 3000 and using environment variables from a .env.local file.
```bash
# Build the app
docker build --build-arg APP_NAME=app -t next-forge-app .
# Run it
docker run -p 3000:3000 --env-file .env.local next-forge-app
```
--------------------------------
### Fetch Store Data with Lemon Squeezy Client
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/payments/lemon-squeezy.mdx
Example of using the payments client to fetch store data. This assumes the `getStore` function is available and configured for Lemon Squeezy.
```typescript
import { getStore } from '@repo/payments';
const Page = async () => {
const store = await getStore(123456);
return (
{JSON.stringify(store, null, 2)}
);
};
```
--------------------------------
### Get Turso Database URL
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/database/turso.mdx
Fetch the connection URL for your newly created Turso database using the CLI.
```sh
turso db show --url
```
--------------------------------
### Initialize Auth.js NextAuth
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/authentication/authjs.mdx
Replace existing client and server files with this basic Auth.js initialization. It sets up handlers, signIn, signOut, and auth functions.
```tsx
import NextAuth from "next-auth";
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [],
});
```
--------------------------------
### Replace Neon Dependencies with Supabase
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/database/supabase.mdx
Remove Neon-specific npm packages and install the Supabase package for direct database connection.
```package-install
npm uninstall @neondatabase/serverless @prisma/adapter-neon ws @types/ws --filter @repo/database
```
```package-install
npm install -D supabase --filter @repo/database
```
--------------------------------
### Configure Appwrite Environment Variables
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/authentication/appwrite.mdx
Add necessary Appwrite endpoint, project ID, and API key to your .env.local file. Ensure the API key is kept server-side.
```bash
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
APPWRITE_API_KEY=your-api-key
```
--------------------------------
### Configure Hypertune Build Scripts
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/migrations/flags/hypertune.mdx
Add 'analyze' and 'build' scripts to the feature-flags package.json to enable Hypertune command execution.
```json
{
"scripts": {
"analyze": "hypertune",
"build": "hypertune"
}
}
```
--------------------------------
### Link Applications with vercel link
Source: https://github.com/vercel/next-forge/blob/main/docs/content/docs/packages/toolbar.mdx
Run `vercel link` in each application directory to create a `.vercel/project.json` file. This step is optional but recommended for Vercel Toolbar integration.
```sh
cd apps/app && vercel link && cd ../..
cd apps/web && vercel link && cd ../..
cd apps/api && vercel link && cd ../..
```