Using Yarn - Fluentui

import { Meta } from '@storybook/addon-docs/blocks';

Next.js@>=13 appDir router

For basic instructions on getting Next.js set up, see Getting Started.

Get a basic next.js setup running, rendering a page from the app folder, as guided by the tutorial.
Add the Fluent UI dependencies: @fluentui/react-components.
Add the SWC plugin to add the client directive for our library: fluentui-next-appdir-directive. See the repo for more information

shell

# Using Yarn
yarn add @fluentui/react-components fluentui-next-appdir-directive

# Using NPM
npm install @fluentui/react-components fluentui-next-appdir-directive

Setting up Fluent UI

Create a providers.tsx file under your app folder with the following content:

tsx

'use client';

import * as React from 'react';
import {
  FluentProvider,
  teamsDarkTheme,
  SSRProvider,
  RendererProvider,
  createDOMRenderer,
  renderToStyleElements,
} from '@fluentui/react-components';
import { useServerInsertedHTML } from 'next/navigation';

export function Providers({ children }: { children: React.ReactNode }) {
  const [renderer] = React.useState(() => createDOMRenderer());
  const didRenderRef = React.useRef(false);

  useServerInsertedHTML(() => {
    if (didRenderRef.current) {
      return;
    }
    didRenderRef.current = true;
    return <>{renderToStyleElements(renderer)}</>;
  });

  return (
    <RendererProvider renderer={renderer}>
      <SSRProvider>
        <FluentProvider theme={teamsDarkTheme}>{children}</FluentProvider>
      </SSRProvider>
    </RendererProvider>
  );
}

Modify the layout.tsx file under your app folder to add our providers:

tsx

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

// 👇 import the providers
import { Providers } from './providers';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Add fluentui-next-appdir-directive plugin with the paths for @griffel and @fluentui:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcPlugins: [['fluentui-next-appdir-directive', { paths: ['@griffel', '@fluentui'] }]],
  },
};

module.exports = nextConfig;

Finally add your code to the page.tsx file in your app folder:

tsx

import * as React from 'react';
import { Button } from '@fluentui/react-components';

export default function Home() {
  return <Button>Hello everyone</Button>;
}