Creating a static NextJs/Typescript landing page from scratch and deploying it on Vercel
Tags: nextjs, typescript, chakraui, vercel
Published: 2020-06-04 13:08:00

---
title: Creating a static NextJs/Typescript landing page from scratch and deploying it on Vercel
published: true
description: A tutorial for starting a NextJs project and deploying it on Vercel.
tags: nextjs, typescript, chakraui, vercel
cover_image: https://images.unsplash.com/photo-1575470522418-b88b692b8084?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=6000
---

A tutorial for starting a NextJs project and deploying it on Vercel.

For this tutorial, I selected NextJs as a basis for a static website. Some prerequisites for the project are Visual Studio Code or any other editor, **NodeJs,** and **NPM** package manager. You will also install **NextJs**, **Markdown,** and **Chakra-UI** for the project. You can see the end result [here](https://nextjs-chakraui-typescript-website-starter.now.sh/). 

## Let's get started

We'll start installing NextJs for our application. Make sure you have the latest Node and NPM installed on your computer. Start the command terminal and create a new folder `mkdir website`. Then type `cd website` to access your application folder. Let's install the dependencies for the application with `npm install next react react-dom`. After completion, you should edit your `package.json` file and add the following between brackets:

```jsx
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
```

Next, we want to add TypeScript to our project for better type safety. If you don't want to use TS you can always opt-out of this step, but it is recommended for completing this tutorial. Run `touch tsconfig.json` to create a new file. NextJs will take care of setting this up after starting the development server for the first time. We will also install the TypeScript dependencies `npm install --save-dev typescript @types/react @types/node` .

Before we can see if our setup works we have to add a new folder called `pages` into our project folder. By default, NextJs routing is file-system based and we will add new pages by adding new files to the `pages` folder. We'll also add the default homepage into the pages with `touch index.tsx` and add the following code:

```jsx
function HomePage() {
  return <div>Welcome to your Homepage</div>;
}

export default HomePage;
```

The last step before we continue is adding Chakra UI. It is a ReactJs component library with theming to get your app going in no time. We'll install the dependencies with `npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming` in your root directory.

Now we want to see if our setup works. Let's start the development server with `npm run dev` from your project root directory. Wait for the process to complete, and you should see your website on your `http://localhost:3000` in your browser if all went well. 

## Adding Chakra UI to the NextJs app

We'll need to add Chakra to our NextJs web app. For this, we'll need to override the NextJs default App file. Create an `_app.tsx` file into your `pages` directory. Before adding contents we will also add a custom theme file for Chakra in the `root` directory. Create a file `theme.tsx` and add:

```jsx
import { theme } from '@chakra-ui/core';

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    brand: {
      50: '#fff6da',
      100: '#ffe4ad',
      200: '#ffd27d',
      300: '#ffc04b',
      400: '#ffae1a',
      500: '#e69500',
      600: '#b37300',
      700: '#815300',
      800: '#4e3200',
      900: '#1e1000',
    },
  },
};

export default customTheme;
```

You can now customize your website colors and create new design groups. I created the brand color scheme with [SmartSwatch](https://smart-swatch.netlify.app/#orange).

Now we'll update the `_app.tsx` with:

```jsx
import { ThemeProvider, CSSReset } from '@chakra-ui/core';

import customTheme from '../theme';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={customTheme}>
      <CSSReset />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;
```

This completes our integration of Chakra UI:

## Creating a basic landing page layout

Let's start by adding a layout component into our project. We will create a new folder `components` and a file `Layout.tsx`. This will serve as wrapper component to any future pages and passes any child components through: 

```jsx
import { Box, Link } from '@chakra-ui/core';

export default function Layout(props: any) {
  return (
    <>
      <Box>
        <Box margin="auto" width={{ sm: 'full', md: '80em' }} minH="100vh">
          {props.children}
        </Box>
      </Box>
    </>
  );
}
```

We will now update the `index.tsx` by importing the `Layout` component and wrapping it around the `Homepage` function: 

```jsx
import { Flex } from '@chakra-ui/core';
import Layout from 'components/Layout';

function HomePage() {
  return (
    <Layout>
      <Flex justifyContent="center">
        Welcome to Next!
      </Flex>
    </Layout>
  );
}

export default HomePage;
```

For the `Layout` import to work we will need to add a `baseUrl` into our `tsconfig.json` file for setting the root import folder to be the roots, so we add `baseUrl: "."` under the `"compilerOptions"` object. Final `tsconfig.json` file will look like:

```jsx
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}
```

Now we are ready to give our homepage in the `index.tsx` some visual structure and content. First, we will add a heading and an image from Unsplash. We set breakpoints for the Flex containers imported from Chakra. And also add some content. Final version of the `index.tsx` is:

```jsx
import { Box, Heading, Flex, Image, Text } from '@chakra-ui/core';
import Layout from 'components/Layout';

// Chakra UI default breakpoints are set as "min-width" array values in Chakra theme
// breakpoints: ["30em", "48em", "62em", "80em"],
// You can set style values to every breakpoint
function HomePage() {
  return (
    <Layout>
      <Flex flexDirection={['column', 'column', 'column', 'row']}>
        <Flex alignItems="start" ml={[0, 0, 0, '-20%']}>
          <Image
            maxW={['auto', 'auto', 'auto', '52em']}
            src="https://images.unsplash.com/photo-1498747324273-943f73ca00b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80"
          />
        </Flex>
        <Flex flexDirection="column" m={8}>
          <Flex alignItems="center" h={['auto', 'auto', 'auto', '32em']}>
            <Heading>
              Build your landing page with{' '}
              <Text color="brand.300" as="span">
                NextJs
              </Text>
              ,{' '}
              <Text color="brand.300" as="span">
                Chakra UI
              </Text>{' '}
              and{' '}
              <Text color="brand.300" as="span">
                TypeScript
              </Text>
            </Heading>
          </Flex>
          <Box mb={8}>
            <Heading mb={8}>NextJs</Heading>
            <Text>
              Enter Next.js, the React Framework. Next.js provides a solution to all of the above
              problems. But more importantly, it puts you and your team in the pit of success when
              building React applications.
            </Text>
          </Box>
          <Box mb={8}>
            <Heading mb={8}>Chakra UI</Heading>
            <Text>
              Build accessible React apps & websites with speed Chakra UI is a simple, modular and
              accessible component library that gives you all the building blocks you need to build
              your React applications.
            </Text>
          </Box>
          <Box mb={8}>
            <Heading mb={8}>TypeScript</Heading>
            <Text>
              JavaScript that scales. TypeScript is a typed superset of JavaScript that compiles to
              plain JavaScript. Any browser. Any host. Any OS. Open source.
            </Text>
          </Box>
        </Flex>
      </Flex>
    </Layout>
  );
}

export default HomePage;
```

You should now have a visual layout ready for deployment on Vercel.

## Deploying your site to Vercel

We'll use Github version controlling to automatically deploy changes to Vercel. For this make sure you have the latest Git CLI installed on your computer. We'll first have to initialize our root folder with `git init` to create a new git project. We'll add a `.gitignore` file to root as to not include the `node_modules` or `.next` and `build` folder. 

```jsx
.next
build
node_modules
```

Then we will add our file changes to git with `git add .` and make our first commit `git commit -m "nextjs website starter"`.

Now you can got to the Github webpage and create a new project. Call it whatever you want, we'll use `nextjs-website`. Copy the created instruction and connect it with your local project with `git remote add origin <REPLACE WITH GIT PATH>` and push it to Github `git push -u origin master`.

You will have to sign up with Vercel for hosting your site using your Github account. When asked give Vercel access to your newly created Github project. Next, you should import your project and insert the default build command `npm run build`  into the setup form. You can leave the other fields empty.

And you are done! Vercel gives you a subdomain link where you can view your newly deployed landing page. Also whenever you push updates to your Github project Vercel will pick them up automatically and deploy the changes.