# Guide
This guide builds on the [SDK quickstart](https://docs.hypertune.com/getting-started/set-up-hypertune) and shows you how to:
* Create a new feature flag
* Access it in your code
* Configure targeting rules
## Prerequisites
[Set up Hypertune](https://docs.hypertune.com/getting-started/set-up-hypertune)
## Create a feature flag
Go to the **Flags** view in the dashboard. Click the **+** button in the top-right of the sidebar and select **Flag**.
Enter a name and choose a type. Use **Boolean** for simple on/off flags. Click **Create**.
The new flag is disabled by default. Click **Save** in the top-right to save your changes.
## Access the feature flag in your code
Regenerate the client after adding a new flag:
{% tabs %}
{% tab title="npm" %}
```bash
npx hypertune
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn hypertune
```
{% endtab %}
{% tab title="pnpm" %}
```bash
pnpm hypertune
```
{% endtab %}
{% endtabs %}
Then use the generated method to access your feature flag:
{% tabs %}
{% tab title="Client Components" %}
Use the generated `useHypertune` hook:
{% code title="components/ClientComponent.tsx" %}
```tsx
'use client'
import { useHypertune } from '@/generated/hypertune.react'
export default function ClientComponent() {
const hypertune = useHypertune()
const anotherFlag = hypertune.anotherFlag({ fallback: false })
return
Another Flag: {String(anotherFlag)}
}
```
{% endcode %}
{% endtab %}
{% tab title="Server Components" %}
To use flags in Server Components, use the `getHypertune` function. Include the `` component in your component tree, passing it the paths of any flags you use via the `flagPaths` prop. This ensures that flag evaluations and experiment exposures are logged on the client (in the browser):
{% code title="components/ServerComponent.tsx" %}
```typescript
import { HypertuneClientLogger } from '@/generated/hypertune.react'
import getHypertune from '@/lib/getHypertune'
export default async function ServerComponent() {
const hypertune = await getHypertune()
const anotherFlag = hypertune.anotherFlag({ fallback: false })
return (
Another Flag: {String(anotherFlag)}
)
}
```
{% endcode %}
By default, [remote logging](https://docs.hypertune.com/sdk-reference/remote-logging) is disabled on Next.js servers because prefetching and caching of pages and layouts can cause logs for flag evaluations, experiment exposures, and analytics events to differ from actual user behaviour. To ensure accuracy, remote logging is enabled by default on the client (in the browser) only. This is why you need to include the `` component in your component tree.
{% endtab %}
{% tab title="Route Handlers" %}
To use flags in Route Handlers, use the `getHypertune` function:
{% code title="app/api/route.ts" %}
```typescript
import { waitUntil } from '@vercel/functions'
import { NextResponse } from 'next/server'
import getHypertune from '@/lib/getHypertune'
export const runtime = 'edge'
export async function GET() {
const hypertune = await getHypertune({ isRouteHandler: true })
const anotherFlag = hypertune.anotherFlag({ fallback: false })
waitUntil(hypertune.flushLogs())
return NextResponse.json({ anotherFlag })
}
```
{% endcode %}
**Notes**
* **Enable remote logging:** By default, [remote logging](https://docs.hypertune.com/sdk-reference/remote-logging) is disabled on Next.js servers because prefetching and caching of pages and layouts can cause logs for flag evaluations, experiment exposures, and analytics events to differ from actual user behaviour. To ensure accuracy, remote logging is enabled by default on the client (in the browser) only. However, since Route Handlers aren't subject to the same prefetching and caching patterns, remote logging is enabled for them by passing `{ isRouteHandler: true }` in the call to `getHypertune`.
* **Flush logs:** `waitUntil(hypertune.flushLogs())` ensures that logs are sent. Without this, logs may still flush in the background, but this isn't guaranteed in serverless environments like Vercel deployments.
{% endtab %}
{% tab title="Middleware" %}
To use flags in Middleware, use the `getHypertune` function:
{% code title="middleware.ts" %}
```typescript
import { NextRequest } from 'next/server'
import getHypertune from '@/lib/getHypertune'
export const config = {
matcher: '/:path*',
}
export async function middleware(request: NextRequest) {
const hypertune = await getHypertune()
const anotherFlag = hypertune.anotherFlag({ fallback: false })
console.log(`Another Flag: ${anotherFlag}`)
}
```
{% endcode %}
Include the `` component in your component tree, passing it the paths of any flags you use via the `flagPaths` prop. This ensures that flag evaluations and experiment exposures are logged on the client (in the browser):
{% code title="app/page.tsx" %}
```typescript
import React from 'react'
import { HypertuneClientLogger } from '@/generated/hypertune.react'
export default async function Home() {
return (
Home
)
}
```
{% endcode %}
By default, [remote logging](https://docs.hypertune.com/sdk-reference/remote-logging) is disabled on Next.js servers because prefetching and caching of pages and layouts can cause logs for flag evaluations, experiment exposures, and analytics events to differ from actual user behaviour. To ensure accuracy, remote logging is enabled by default on the client (in the browser) only. This is why you need to include the `` component in your component tree.
{% endtab %}
{% endtabs %}
Once you deploy your code, you can remotely configure your flag at runtime.
## Configure the feature flag's targeting rules
By default, a new flag is disabled. Click the toggle to enable it for everyone or add rules to enable it under certain conditions.
### Enable for development
To enable the flag during development, click **+ Rule**:
Choose **Context > Environment**. Select **is one of** and add **Development**. Click **Save**.
### Enable for specific users
Click **+ Rule**. Choose **Context > User > Id**. Select **is one of** and add user IDs. Click **Save**.
## Next steps
* Create [variables](https://docs.hypertune.com/concepts/variables) to reuse logic across different flags, e.g. user segments.
* Create an [experiment](https://docs.hypertune.com/getting-started/next.js-pages-router-quickstart) to [A/B test](https://docs.hypertune.com/concepts/a-b-n-tests) your feature or [progressively roll it out](https://docs.hypertune.com/concepts/progressive-rollouts).
* Track [events](https://docs.hypertune.com/concepts/event-types) and build [funnels](https://docs.hypertune.com/concepts/funnels) to measure impact.
* Once the feature is fully rolled out, [deprecate your flag](https://docs.hypertune.com/concepts/flag-deprecation).
.png?alt=media&token=5d9aac8c-2df1-49be-b02b-7e620796af86)
.png?alt=media&token=6e8e3510-1e0b-4d9e-bd08-a25ef5f6f7dc)
.png?alt=media&token=943cdca2-6363-4ef6-b4fe-412b934801cc)
.png?alt=media&token=2292d6f6-bd0b-45f1-9926-9290b217b95b)
.png?alt=media&token=c3410df6-5727-424a-af94-6d9f87378f38)
.png?alt=media&token=1d0c9fb8-bb3a-4ee5-8d31-e0553fd67eab)