Next.js中使用Wix SDK转换富内容为页面元素的报错求助

一、全局CSS导入错误解决方法 #

出现./node_modules/@wix/image/dist/esm/Image.scss Global CSS cannot be imported from within node_modules.错误，是因为Next.js（尤其是App Router）默认禁止在组件中直接导入node_modules内的全局CSS，可通过以下方式解决：

1. 转译Wix相关模块 #

使用next-transpile-modules让Next.js转译Wix的CSS/SCSS文件：

• 安装依赖：

  npm install next-transpile-modules --save-dev
  

• 在next.config.js中配置转译包：

  const withTM = require('next-transpile-modules')(['@wix/image', '@wix/ricos-viewer', '@wix/blog']);
  
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // 你的其他Next.js配置
  };
  
  module.exports = withTM(nextConfig);
  

2. 全局导入CSS #

将Wix组件的CSS导入到全局样式文件中：

• 如果是App Router，在app/globals.css中添加：

  @import '@wix/image/dist/esm/Image.css';
  @import '@wix/ricos-viewer/dist/styles.min.css';
  

• 如果是Pages Router，在pages/_app.tsx中导入全局样式文件，或者直接在该文件中导入上述CSS。

3. 启用SCSS支持（可选） #

如果需要直接处理SCSS文件，确保Next.js已安装SCSS依赖：

npm install sass --save-dev

之后即可在全局样式文件中导入.scss格式的文件。

二、Wix SDK 正确使用流程 #

1. 初始化Wix SDK #

创建lib/wix.ts文件初始化客户端：

import { createClient } from '@wix/sdk';
import { blog } from '@wix/blog';

export const wixClient = createClient({
  modules: { blog },
  auth: {
    siteId: '你的Wix站点ID',
    // 根据你的认证方式配置，比如API密钥或OAuth
    apiKey: '你的API密钥'
  }
});

2. 获取富内容数据 #

在页面或组件中调用API获取富内容：

'use client';

import { wixClient } from '@/lib/wix';
import RichContentViewer from '@/components/RichContentViewer';
import { useEffect, useState } from 'react';

export default function BlogPostPage() {
  const [postContent, setPostContent] = useState(null);

  useEffect(() => {
    const fetchPost = async () => {
      const post = await wixClient.blog.getPost('你的文章ID');
      setPostContent(post.richContent);
    };
    fetchPost();
  }, []);

  if (!postContent) return <div>加载中...</div>;

  return <RichContentViewer content={postContent} />;
}

3. 创建富内容展示组件 #

创建components/RichContentViewer.tsx（客户端组件）：

'use client';

import { RichContent } from '@wix/ricos-viewer';

interface RichContentViewerProps {
  content: Record<string, any>;
}

export default function RichContentViewer({ content }: RichContentViewerProps) {
  return <RichContent content={content} />;
}

三、关键注意事项 #

• 客户端组件标记：所有使用Wix UI组件的文件必须添加'use client'指令（App Router下），因为Wix组件依赖浏览器环境。
• 依赖完整性：确保安装了所有必需包：@wix/sdk、@wix/blog、@wix/ricos-viewer及对应的Ricos插件（如@wix/ricos-plugin-image等）。
• 样式隔离：避免在组件内导入全局CSS，统一在全局样式文件中处理，防止Next.js报错。

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