Next.js 14 和信号：将服务器端数据转发到客户端组件

问题描述 投票：0回答：1

如何在 Next.js 14 中正确配置应用程序，以便在位于 

app
目录中的 layout.js 文件中，我可以从服务器端获取应用程序配置数据并将其存储在 Singles 中？我想在其他组件中使用这些数据。当我添加此数据时，
settings.value
为空，即使我可以在服务器端看到它正在添加。直接从服务器端的数据库中获取这些数据会更好吗？由于该对象的复杂结构，我不想使用 
useContext
。您对如何解决这个问题有什么想法吗？

我的示例代码： 布局.tsx

import { Inter } from "next/font/google";

import { fetchRestaurantSettings } from '@/services/fetchRestaurantSettings';
import { setSettings } from '@/signals/SettingsSignals';


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

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const settings = await fetchRestaurantSettings();


  setSettings(settings);

  return (
    <html lang='en'>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

这是我的信号：

import { signal, computed } from '@preact/signals-react';
import { RestaurantSettings } from '@/types/RestaurantSettings';

export const settingsData = signal<RestaurantSettings | null>(null);

export function setSettings(data: RestaurantSettings) {
  console.log(data); // I can add data on server side
  return settingsData.value = data;
}

export const settings = computed(() => settingsData.value);

在这个文件中，我想获取应该从服务器端检索的数据，因为我也在服务器端使用配置。

'use client';

import React from 'react';
import { settings, settingsData } from '@/signals/SettingsSignals';

const Test: React.FC = () => {
  console.log(settingsData.value); // it's null
  console.log(settings); // 'empty' proxy
  
  return <>test</>
};

export default Test;
reactjs next.js signals
1个回答
0
投票

你能展示一下你的 next.config.js 和 package.json 吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.