docs/pages/ui/getting-started/frameworks/nextjs.mdx - dev - githubmirror/tabler

docs/pages/ui/getting-started/frameworks/nextjs.mdx
126 строк3 KB
Paweł Kuna
Improve docs SEO, performance and content quality (#2841)
11 авг 2026, 15:45
11 авг 2026, 15:4539634cb
---
title: Next.js
order: 3
summary: Set up Tabler in Next.js and build a first working page.
description: Install Tabler in Next.js - import the CSS globally, load the JS on the client, and render a minimal page with a Tabler card.
icon: brand-nextjs
seoDescription: Install `@tabler/core`, import CSS and JS in Next.js, and render a minimal page layout with a Tabler card.
layout: '@layouts/DocsMdxLayout.astro'
---

import TabsPackage from '@components/TabsPackage.astro'
import CdnImportPackage from '@components/CdnImportPackage.astro'
import Steps from '@components/Steps.astro'

Next.js renders on the server first, which is great for performance but means browser-only code needs care: Tabler CSS can be imported globally, while `tabler.min.js` must load on the client. This guide shows an App Router pattern that handles both cleanly.

You will install `@tabler/core`, add its CSS to your global stylesheet, mount a small client component for Tabler JavaScript, and render a first page with a Tabler card.

## Setup

<Steps>

### Install Tabler package

Install `@tabler/core` with your preferred package manager:

<TabsPackage name="@tabler/core" />

You can also use CDN files when you need a quick setup:

<CdnImportPackage />

### Import styles

Import Tabler CSS once in your global stylesheet (`app/globals.css`):

```scss
@import '@tabler/core/dist/css/tabler.min.css';
```

For full theme customization, import SCSS sources:

```scss
@import '@tabler/core/scss/tabler';
```

### Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.

Next.js-specific note: `tabler.min.js` accesses `document`, so load it only on the client. If you import it during SSR, Next.js throws `document is not defined`.

Use a client component and dynamic import (`app/tabler-scripts.jsx`):

```jsx
'use client'

import { useEffect } from 'react'

export function TablerScripts() {
  useEffect(() => {
    import('@tabler/core/dist/js/tabler.min.js')
  }, [])

  return null
}
```

### Minimal working example

Load styles globally and mount client-only scripts in the app layout.

`app/layout.jsx`:

```jsx
import './globals.css'
import { TablerScripts } from './tabler-scripts'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TablerScripts />
        {children}
      </body>
    </html>
  )
}
```

`app/page.jsx`:

```jsx
export default function Page() {
  return (
    <div className="page">
      <div className="page-wrapper">
        <div className="container-xl py-4">
          <div className="card">
            <div className="card-body">
              <h3 className="card-title">Next.js + Tabler</h3>
              <p className="text-secondary mb-0">Your Tabler setup is working.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
```

Run the app:

```shell
npm run dev
```

Open the local Next.js URL and confirm the card is styled with Tabler.

### Next steps

- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
- Explore [Layout](/ui/layout) to choose page structures.
- Browse [Components](/ui/components) to add UI building blocks.

</Steps>