Next.js中Tremor卡片组件无法正常显示问题求助

问题描述 #

使用Tremor开发Next.js应用时，本地localhost页面未按预期渲染，Card组件完全不可见，仅显示页面中的<h1>标签内容。

相关代码 #

page.tsx #

'use client'

import { Card, Text, Subtitle } from '@tremor/react'

export default function Home() {
    return (
        <main className="text-6xl">
            <Card>
                <Text> Weather AI</Text>
                <Subtitle>
                    Powered by OpenAI, Next.js 13.3, Tailwind CSS, Tremor 2.0 +
                    More!
                </Subtitle>
                <h1>Let's build a GPT-4 Weather App</h1>
            </Card>
        </main>
    )
}

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './app/**/*.{js,ts,jsx,tsx,mdx}',
        './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {
            backgroundImage: {
                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
                'gradient-conic':
                    'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
            },
        },
    },
    plugins: [],
}

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        externalDir:
            true |
            {
                enabled: true,
                silent: true,
            },
        appDir: true,
        serverComponentsExternalPackages: ['@tremor/react'],
    },
}

module.exports = nextConfig

修复方案 #

1. 修正next.config.js的语法错误 #

externalDir配置存在语法错误，布尔值与对象的或运算会导致配置失效，修改为正确的对象格式：

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        externalDir: {
            enabled: true,
            silent: true,
        },
        appDir: true,
    },
}

module.exports = nextConfig

同时移除serverComponentsExternalPackages，因为Tremor组件均为客户端组件，无需该配置。

2. 导入Tremor全局样式 #

在app目录的globals.css文件中添加Tremor基础样式导入：

@import '@tremor/react/dist/esm/tremor.css';

/* 原有全局样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;

3. 验证依赖完整性 #

确保已正确安装所有必要依赖：

npm install @tremor/react tailwindcss postcss autoprefixer

完成以上步骤后，重启Next.js开发服务器，Card组件即可正常渲染。

内容的提问来源于stack exchange，提问作者CoderNewbie