Creating a static NextJs/Typescript landing page from scratch and deploying it on Vercel

Kalle Raus — Thu, 04 Jun 2020 13:08:00 +0000

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.

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:

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

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:

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.

Now we'll update the _app.tsx with:

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:

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:

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:

{
  "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:

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.

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

DEV Community: Kalle Raus

Creating a static NextJs/Typescript landing page from scratch and deploying it on Vercel

Let's get started

Adding Chakra UI to the NextJs app

Creating a basic landing page layout

Deploying your site to Vercel