with-next.md

section	Use With
title	Next.js
package	@twind/with-next
example	true
excerpt	Setting up Twind for seamless integration in a [Next.js](https://nextjs.org) project.
next	./with-react.md

🤝 Compatibility

@twind/with-next	next
>=1.0.0 <2	12.x, 13.x

Caution > Next 13 app directory is currently not supported. Please use the legacy app directory for now.

📦 Installation

1. :::cols-12{.gap-4}

   ::col-span-4 Install from npm

   @twind/core and @twind/with-next are available on npm and need to be installed together.

   ::col-span-8

   npm install @twind/core @twind/with-next

   :::

2. :::cols-12{.gap-4}

   ::col-span-4 Define the configuration

   Using an extra file, twind.config.js, allows some tools like IntelliSense to find your configuration.

   ::col-span-8

   import { defineConfig } from '@twind/core'
   
   export default defineConfig({
     /* @twind/with-next will use hashed class names in production by default
      * If you don't want this, uncomment the next line
      */
     // hash: false,
   })

   :::

3. :::cols-12{.gap-4}

   ::col-span-4 Load Twind in the App component

   install creates and registers a twind instance that will generate the styles. This allows third-party packages to import tw from the twind package and get the same instance.

   ::col-span-8

   import install from '@twind/with-next/app'
   import config from '../twind.config'
   
   export default install(config)

   ::col-span-4 If you are using a custom App component you need to pass the it to install.

   ::col-span-8

   + import install from '@twind/with-next/app'
   + import config from '../twind.config'
   function MyApp({ Component, pageProps }) {
     /* ... */
   }
   - export default MyApp
   + export default install(config, MyApp)

   :::

4. :::cols-12{.gap-4}

   ::col-span-4

   Enable Twind in Document component

   Enable server-side rendering of all the styles that are used within the HTML and sending them to the client.

   ::col-span-8

   export { default } from '@twind/with-next/document'

   ::col-span-4 If you are using a custom Document component you need to pass the it to install.

   ::col-span-8

   import Document, { Html, Head, Main, NextScript } from 'next/document'
   + import install from '@twind/with-next/document'
   class MyDocument extends Document {
     /* ... */
   }
   + export default install(MyDocument)

   :::

5. Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

   :::cols-12{.gap-4}

   ::col-span-4 Install the presets

   All presets are available on npm.

   ::col-span-8

   npm install @twind/preset-autoprefix @twind/preset-tailwind

   :::

   :::cols-12{.gap-4}

   ::col-span-4 Configure the presets

   Each preset must be added to the presets array in the configuration.

   ::col-span-8

   import { defineConfig } from '@twind/core'
   import presetAutoprefix from '@twind/preset-autoprefix'
   import presetTailwind from '@twind/preset-tailwind'
   
   export default defineConfig({
     presets: [presetAutoprefix(), presetTailwind()],
   })

   :::

6. :::cols-12{.gap-4}

   ::col-span-4 Start using Twind in your components

   Start using Twind classes to style your content.

   ::col-span-8

   export default function Hello() {
     return <h1 className="text-3xl font-bold underline">Hello world!</h1>
   }

   :::