使用 Next.js 构建目标页面

了解如何使用 Next.js 和 Reflexjs 构建目标页面。

本分步指南将指导你使用 Next.js 构建目标页面，并使用 Reflexjs 进行样式化处理。

使用 Reflexjs 进行样式化处理

在开始之前，让我们快速介绍一下如何使用 Reflexjs 为组件设置样式。

在你的 `theme.js` 文件中定义你的令牌 (颜色、字体和间距) 及变量。

theme.ts
export default {
  // 1. Tokens.
  colors: {
    text: "#111",
    primary: "#06f",
  },
  fonts: {
    body: "system-ui, sans-serif",
    heading: "system-ui, sans-serif",
  },
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },

  // 2. Variants.
  text: {
    color: "text",
    fontFamily: "body",

    lead: {
      fontSize: "2rem",
      fontWeight: "body",
    },
  },
  heading: {
    color: "text",
    fontFamily: "body",

    h1: {
      fontSize: "2.4rem",
    },
  },
}

使用样式道具对组件设置样式。你可以使用令牌名称引用令牌，并且可以混合任何 CSS 属性。

<section display="grid" col="2" py="10">
  <div>
    <h1 variant="heading.h1" color="primary">{title}</h1>
    <p variant="text.lead">{text}</p>
    <button bg="primary" py="2" px="4" mt="4>Learn more</button>
  </div>
  <img src={image} alt="Alt text" />
</section>

创建新项目

使用以下方法创建新的 Next.js 网站：nextjs-starter-typescript.

npx create-next-app reflexjs-example -e https://github.com/reflexjs/nextjs-starter-typescript

启动开发服务器

cd reflexjs-example

yarn dev

如果你在浏览器中打开 http://localhost:3000，应该会看到默认的目标页面。

快速浏览一下 `pages/index.tsx`，看看此页面如何构建。

目录结构

入门目录结构旨在为构建你的网站提供一个绝佳的起点。

但是，Reflexjs 对你如何组织文件不做任何限制。

reflexjs-example
  ├── pages
  │   └── index.tsx
  ├── public
  │   └── images
  └── src
      └── theme.ts

添加页面

要添加新页面，请创建文件：`pages/about.tsx` 并使用以下代码

pages/about.tsx
export default function AboutPage() {
  return <p>This is the about page</p>
}

现在打开 http://localhost:3000/about 查看你的新页面。

仅此而已。这就是在 Next.js 中创建页面的全部内容。

添加区块

我们在上面创建的页面看起来没什么好东西。我们来添加一个区块。

pages/about.tsx
export default function AboutPage() {
  return (
    <section>
      <div variant="container">
        <div display="grid" col="2" gap="16">
          <div position="relative">
            <Image src="/images/placeholder.jpg" layout="fill" />
          </div>
          <div py="16">
            <h2 variant="heading.h2">Build something amazing</h2>
            <p fontSize="xl" my="6">
              Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus
              temporibus.
            </p>
            <Link href="/" passHref>
              <a variant="button.primary.lg">Learn more</a>
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}

此区块使用style props进行样式化。style props 从你的 theme.ts 文件中提取值（标记）。

部署

我们的页面已经准备好了。我们来发布我们的网站吧。

部署到 Vercel

在Vercel上创建一个账户。
安装 Vercel CLI yarn global add vercel 或 npm i -g vercel。
从你的 reflexjs-example 网站的根目录运行以下命令

vercel --prod

部署到 Netlify

在Netlify上创建一个账户。
安装 Netlify CLI yarn global add netlify-cli 或 npm i -g netlify-cli。
从你的 reflexjs-example 网站的根目录运行以下命令

netlify init

配置你的网站名称，然后运行以下命令部署你的网站。

yarn build
netlify deploy

为发布目录输入 .next。

为了持续开发和部署，你应该将你的网站连接到一个 .git 仓库。

入门