Reflexjs
DocumentationBlocks LibraryGuidesGitHub
v1.0.1

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.

TLDR#

Styling with Reflexjs#

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

  1. 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",
    },
  },
}
  1. 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#

  1. Create a new Next.js site using the nextjs-starter-tutorial.
npx create-next-app reflexjs-example -e https://github.com/reflexjs/nextjs-starter-tutorial
  1. 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
      └── components
      │   └── layout.tsx
      ├── blocks
      │   └── hero.tsx
      ├── config.ts
      └── 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.

Using components#

The page we created above is does not look like much. Let's pull in the Layout component and wrap our page.

pages/about.tsx
import { Layout } from "@/components/layout" 
export default function AboutPage() {
  return (
    <Layout>
      <p>This is the about page</p>
    </Layout>
  )
}

This should wrap the page in a header and footer.

Add a block#

The starter comes with a sample hero blocks. Import this block from src/blocks/hero.tsx and use it on the About page.

pages/about.tsx
import { Layout } from "@/components/layout"
import Hero from "@/blocks/hero" 
export default function AboutPage() {
  return (
    <Layout>
      <Hero heading="About Us" text="This is the about page" />
    </Layout>
  )
}

Style using props#

To understand how styling with props works, let's build a new feature block.

pages/about.tsx
import { Layout } from "@/components/layout"
import Hero from "@/blocks/hero"
import Image from "next/image"
import Link from "next/link"
export default function AboutPage() {
  return (
    <Layout>
      <Hero heading="About Us" text="This is the about page" />
      <section py="16">
        <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>
    </Layout>
  )
}

The Hero block can also be passed style props.

<Hero heading="About Us" text="This is the about page" bg="muted" />

Add a link to the About page in the site navigation.

src/config.ts
export default {
  site: {
    branding: {
      name: "Reflexjs",
    },
    copyright: `© ${new Date().getFullYear()} Reflexjs`,
    links: [
      {
        title: "Home",
        href: "/",
      },
      {
        title: "About",
        href: "/about",
      },
    ],
  },
}

Deploy#

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

Deploying to Vercel#

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

Deploying to Netlify#

  1. Create an account on Netlify.
  2. Install the Netlify CLI yarn global add netlify-cli or npm i -g netlify-cli.
  3. From the root of your reflexjs-example site, run the following:
netlify init
  1. 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.

On this page

© 2021 Reflexjs

DocumentationBlocks LibraryGuidesGitHub