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

hkmswyz6  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(149)

在版本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

bksxznpy

bksxznpy1#

在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页面中使用仅限客户端的组件(如表单)。

相关问题