Build a landing page with Next.js

Learn how to build a landing page with Next.js and Reflexjs.

This step-by-step guide will walk you through the process of building a landing page with Next.js and styled using Reflexjs.

Styling with Reflexjs

Before we start, let's do a quick run down on how to style components with Reflexjs.

Define your tokens (colors, fonts, and spacing) and variants in your theme.js file.

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",
    },
  },
}

Style components using style props. You reference tokens using the token name and you can mix in any CSS properties.

<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>

Create a new project

Create a new Next.js site using the nextjs-starter-typescript.

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

Start the development server:

cd reflexjs-example

yarn dev

If you open http://localhost:3000 in your browser, you should see the default landing page.

Take a quick look at pages/index.tsx to see how this page is built.

Directory Structure

The starter directory structure is intended to provide a great starting point for building your site.

However, Reflexjs imposes no restrictions on how you organize your files.

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

Add a page

To add a new page, create the file: pages/about.tsx with the following code:

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

Now open http://localhost:3000/about to see your new page.

That's it. This is all there is to creating pages in Next.js.

Add a block

The page we created above is does not look like much. Let's add a block.

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>
  )
}

This block is styled using style props. Style props pulls values (tokens) from your theme.ts file.

Deploy

Our page is ready. Let's publish our site.

Deploying to Vercel

Create an account on Vercel.
Install the Vercel CLI yarn global add vercel or npm i -g vercel.
From the root of your reflexjs-example site, run the following:

vercel --prod

Deploying to Netlify

Create an account on Netlify.
Install the Netlify CLI yarn global add netlify-cli or npm i -g netlify-cli.
From the root of your reflexjs-example site, run the following:

netlify init

Configure your site name and then run the following to deploy your site.

yarn build
netlify deploy

Enter .next for Publish directory.

For ongoing development and deployment, you should connect your site to a .git repo.

Getting Started