Next.js 13v在服务器上使用客户端页面

在版本13的Next中，通过应用程序文件夹，我还不明白如何在仅服务器的页面上使用“使用客户端”组件，例如表单。以前不管怎么说
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
我已经尝试了不同的方式，通过动态导入，我不明白它应该如何正确实现

我有一个客户端组件：

export function NewsFeed({ }) {

    const [el, setEl] = useState(4);

    useEffect(() => {
        function handleResize() {
            if (window.innerWidth < 1024) {
                setEl(2);
            }if (window.innerWidth < 640) {
                setEl(1);
            }else {
                setEl(4);
            }
        }
        window.addEventListener("resize", handleResize);
        handleResize();
        return () => window.removeEventListener("resize", handleResize);
    }, [])

    //generation  NewsFooter
    const generateIconsAndText = (count: number) => {
        const elements = [];

        for (let i = 0; i < count; i++) {
            if (i < 3) {
                elements.push(
                    <svg key={`svg-${i}`} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    </svg>,
                    <span key={`span-${i}`} className={styles.footertTitle}>ОЧЕНЬ ВАЖНАЯ НОВОСТЬ</span>
                );
            } if (i == 3) {
                elements.push(
                    <svg key={`svg-${i}`} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    </svg>,
                );
            }
        }

        return elements;
    }

    const NewsFooter = () => {
        return (
            <div className={styles.footer}>
                {generateIconsAndText(el)} 
            </div>
        );
    }

    return <div className={styles.background}>
        <div className={styles.title}>Лента</div>
        <div className={styles.content}>
            <ul>
                {firedNewsArr.map((item, index) => (
                    <li key={index}>
                        <div className={styles.newsLiDiv}>
                            <div className={styles.column}>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    
                                </svg>
                            </div>
                            <div className={styles.column}>
                                <div className={styles.newsDesc}> {item.title}</div>
                                <div className={styles.newsAbout}>
                                    <div className={styles.newsTime}> {item.createdAt}</div>
                                    {/* <Btn props ={item.newsType} color={'#FF6B00'}/> */}

                                    <button className={styles.newsType}> {item.newsType} </button>
                                </div>
                            </div>
                        </div>
                    </li>
                ))}

            </ul>
        </div>
        <div className={styles.footer}>
            <NewsFooter />
        </div>
    </div >
}

当我将其导入到服务器组件时，我得到错误：

const NewsFeed = dynamic(() => import('./newsFeed/NewsFeed'), { ssr: false });

export function RightNewsBlock({ }) { <NewsFeed />}

enter image description here

在Next.js版本13中，如果你想在一个只有服务器渲染的页面上使用仅客户端组件（如表单），你可以按照以下步骤操作：

在组件文件夹中为表单创建一个单独的React组件。我们称之为MyForm.js
.

// components/MyForm.js
import React from 'react';

function MyForm() {
  // Your form JSX code here
  return (
    <form>
      {/* Form fields and submit button */}
    </form>
  );
}

export default MyForm;

在服务器呈现的页面上，导入并使用MyForm组件。确保使用Next.js中的dynamic函数动态导入它。

// pages/my-page.js
import dynamic from 'next/dynamic';

const MyForm = dynamic(() => import('../components/MyForm'), { ssr: false });

function MyPage() {
  return (
    <div>
      {/* Your server-rendered content */}
      <MyForm /> {/* This will load the form on the client side */}
    </div>
  );
}

export default MyPage;

这种方法允许您在服务器呈现的Next.js页面中使用仅限客户端的组件（如表单）。

Next.js 13v在服务器上使用客户端页面

1条答案

相关问题

热门标签

最新问答