next.js 实践

版本：next.js@15.0.0-canary.75

1. 用服务端的方式通过fetch获取数据报错

Error: connect ECONNREFUSED

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

const baseUrl = 'http://localhost:23820/';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export const request = async (url: string, params?: any) => {
  const nextUrl = `${baseUrl}${url}`;
  try {
    const res = await fetch(nextUrl, {
      headers: {
        accept: 'application/json'
      },
      cache: 'no-store',
      ...params
    });
    const ret = await res.json();
    return ret;
  } catch (error) {
    console.warn('request error:', error);
  }
};

我用postman和curl命令都是没问题的，但是用这种方式不行，还尝试了umirc代理跟nest.js项目中用fetch，axios请求都是报这个错，但是请求nest.js接口const products = await request('http://localhost:3000/products');没有问题，最后尝试了将地址改为http://127.0.0.1:23820/，接口成功的返回数据了。感觉是nodejs的问题，于是查阅，ECONNREFUSED on NodeJS 18 #1624，查看下我的nodejs版本为v18.20.4，的确如issue中所说，是nodejs的dsn策略优先查找ipv6,但是服务端只监测IPv4的地址，导致匹配不上。另一个csr项目为了不让写在umirc文件中的服务端地址提交到github公开仓库里，昨天对本机的nginx做了代理，试了很多次不起作用，顺着这个思路将umirc代理的地址从localhost改为127.0.0.1就好了。

2. server组件调用client组件报错

错误信息：
Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

解决办法：
在client组件中用useState存数据，而不是用server的async方式

Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework. #64814

以下都是在基于next.js@15.0.1

3. pnpm run build 报错

system/page.tsx

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@/components/ui/card';
import { showConfigs, showVariables } from '../actions';

export default async function ProductsPage() {
  const configs = await showConfigs();
  const variables = await showVariables();

  return (
    <div>
  
    </div>
  );
}

actions.tsx

export const showConfigs = async () => {
  try {
    const x = await get(`${ApiUrl.configs}`);
    return x;
  } catch (error) {
    console.log('🚀 ~ error:', error);
    unstable_rethrow(error);
    return {};
  }
};

export const showVariables = async () => {
  try {
    const x = await get(`${ApiUrl.variables}/global`);
    return x;
  } catch (error) {
    unstable_rethrow(error);
    console.log('🚀 ~ error:', error);
    return {};
  }
};

request.ts

const baseUrl = 'http://127.0.0.1:23820/';

export const request = async (
  url: string,
  params: Record<string, unknown> = {},
  method: string = 'GET'
) => {
  let nextUrl = `${baseUrl}${url}`;
  const options: RequestInit = {
    headers: {
      accept: 'application/json'
    },
    cache: 'no-store',
    method
  };

  if (method === 'GET') {
    nextUrl +=
      '?' + new URLSearchParams(params as Record<string, string>).toString();
  } else {
    options.body = JSON.stringify(params);
  }

  try {
    const res = await fetch(nextUrl, options);
    const ret = await res.json();
    return ret;
  } catch (error) {
    console.warn('request error:', error);
  }
};

export const get = (url: string, params?: Record<string, string>) =>
  request(url, params, 'GET');

报错信息：