如何使用新的应用程序路由器在NextJS 13中重构布局，以便我仍然可以使用元数据API？

6ju8rftf 于 2023-06-05 发布在其他

关注(0)|答案(1)|浏览(153)

我正在使用NextJS 13的较新的应用程序路由器，我无法理解如何构建应用程序，以便我可以使用元数据API。我的主页在app文件夹的根目录下。

这个应用程序真的很简单。我有主页和两个额外的路线。我需要我的导航栏出现在主页和两条路线。为此，我将导航添加到根布局文件中，在那里我还为我需要的模态添加了一个门户。我遇到的问题是因为我需要useState来控制打开和关闭模式，这意味着我必须将文件指定为带有“use client”的客户端组件，这意味着现在我不能使用元数据API，因为它只能在服务器组件中工作。

'use client'

import React, { useState } from 'react';
import MainNav from '@/components/navigation/main-nav/Navbar';
import MobileModal from '@/components/ui/modal/MobileModal';
import './globals.css';
// import { Inter } from 'next/font/google';

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

export const metadata = {
  title: 'App title',
  description:
    'Site description here',
};

import StyledComponentsRegistry from 'lib/registry';

export default function RootLayout({ children }) {
  const [displayModal, setDisplayModal] = useState(false);

  const showModalHandler = () => {
    setDisplayModal(true);
  };

  const hideModalHandler = () => {
    setDisplayModal(false);
  };
  return (
    <html>
      <body>
        <MainNav onShowmodal={showModalHandler} onClose={hideModalHandler} />
        {displayModal && <MobileModal onClose={hideModalHandler} />}
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
        <div id="backdrop-root"></div>
        <div id="overlay-root"></div>
      </body>
    </html>
  );
}

有没有更好的方法来构建这个结构，使我可以将根布局作为服务器组件，并且仍然可以使用我的门户和导航？我在这个项目中使用Next的唯一原因是为了改善SEO。我知道我可以回到页面路由器设置，但我希望找到一个解决方案，可以使用应用程序路由器。

next.js

来源：https://stackoverflow.com/questions/76355639/how-to-restructure-layouts-in-nextjs-13-using-the-new-app-router-so-i-can-still

1条答案

按热度按时间

hsvhsicv1#

好吧，看起来解决方案很简单，但我不确定这是不是最好的方法。我在app文件夹的根目录下创建了另一个布局文件，可以在其中管理导航栏状态。

新建布局文件- mainLayout.js：

'use client';
import React, { useState } from 'react';
import MainNav from '@/components/navigation/main-nav/Navbar';
import MobileModal from '@/components/ui/modal/MobileModal';

const MainLayout = () => {
  const [displayModal, setDisplayModal] = useState(false);

  const showModalHandler = () => {
    setDisplayModal(true);
  };

  const hideModalHandler = () => {
    setDisplayModal(false);
  };
  return (
    <>
      <MainNav onShowmodal={showModalHandler} onClose={hideModalHandler} />
      {displayModal && <MobileModal onClose={hideModalHandler} />}
    </>
  );
};
export default MainLayout;

修改的根布局文件

import MainLayout from './mainLayout';
    import './globals.css';
    // import { Inter } from 'next/font/google';
    
   

     // const inter = Inter({ subsets: ['latin'] });
        
        export const metadata = {
          title: 'App title',
          description:
            'Site description',
        };
        
        import StyledComponentsRegistry from 'lib/registry';
        
        export default function RootLayout({ children }) {
          return (
            <html>
              <body>
                <MainLayout />
                <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
                <div id="backdrop-root"></div>
                <div id="overlay-root"></div>
              </body>
            </html>
          );
        }

您只需将新的布局插入到根布局中，现在元数据就显示出来了，导航和门户也正常工作。也许有更好的方法，但这是可行的。主要的收获是确保将所有内容（客户端和服务器端）分开，并且在任何想要使用元数据API的布局文件中没有状态或事件侦听器。不确定这是否感觉像是对旧的使用方式的改进，似乎只是有额外的步骤来做同样的事情。

赞(0）回复(0）举报 2023-06-05

我来回答

如何使用新的应用程序路由器在NextJS 13中重构布局，以便我仍然可以使用元数据API？

1条答案

相关问题

热门标签

最新问答