20、使用Next.js和GraphCMS构建电子商务网站

使用Next.js和GraphCMS构建电子商务网站

1. 准备工作

我们已经与内容管理系统（CMS）建立了连接，能够通过GraphQL API读取、写入、更新或删除数据。接下来，我们将利用这些功能创建店面和产品详情页。

虽然GraphCMS提供了一个优秀的开源电子商务网站模板（可在 此处 找到），但为了深入理解技术决策背后的原理以及解决开发过程中可能出现的问题，我们不采用该模板，而是专注于开发店面的核心组件。

2. 统一页面布局

为了让每个页面具有相似的布局，我们将整个应用程序包裹在Chakra UI的盒子中。具体操作步骤如下：
1. 打开 _app.js 文件。
2. 添加以下组件代码：

import { Box, Flex, ChakraProvider } from '@chakra-ui/react';
function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Flex w="full" minH="100vh" bgColor="gray.100">
        <Box maxW="70vw" m="auto">
          <Component {...pageProps} />
        <