Home

Blog

Getting Online with ReactJS and TypeScript

using NextJS and Vercel

by Alex Fenwood Hughes

July 28, 2020

The Vercel hosting platform provides one of the easiest and most functional ways to host a web application. Vercel provides:

  • simple deployment and hosting for over a dozen JamStack frameworks
  • a generous free-tier for hobbyists
  • automated deployments of a production branch as well as any other branches which can be used for development
  • previews of deployments
  • detailed logs
  • environment variables
  • domain management
  • integrations, like Slack

Recently I started using Vercel to host a NextJS application with TypeScript. In this post I'll walk through how to set up a NextJS application with TypeScript and how to deploy it with Vercel.

How to create a NextJS app with TypeScript

  • Create your project folder
mkdir [some-project-name]
  • Change directories into your project folder
cd [some-project-name]
  • Initialize git
git init
  • Create a .gitignore file and add the following:
node_modules
.next
  • Create an npm project - you can use the default values or respond in greater detail
npm init
  • Install your dependencies
npm install next react react-dom
npm install --save-dev typescript @types/react @types/node
  • Add these scripts to your package.json
"scripts": {
    "dev": "next",
    "build: "next build",
    "start": "next start"
}

Create a tsconfig.json file, useful for configuring TypeScript. NextJS will provide default values if you leave this file empty.

touch tsconfig.json
  • Create a pages directory

    • Open an IDE, I recommend VSCode
    • Create a folder in the root called pages
    • Create a file for the root URL called index.tsx
    • You can add something like the following for a basic page
import { NextPage } from "next";
import { useState } from "react";

const Page: NextPage = () => {
    const [count, setCount] = useState<number>(0);

    return (
        <>
            <div>{count}</div>
            <button onClick={() => setCount((c) => c + 1)}>increase</button>
            <button onClick={() => setCount((c) => c - 1)}>decrease</button>
        </>
    );
};

export default Page;

Start the NextJS app - this will populate the tsconfig.json file

npm run dev
git add .
git commit -m "initial commit"

Let's save to the main branch

git checkout -b main

Add your project to GitHub

  • Create a new project
  • Copy the commands for pushing an existing repo, something like this
git remote add origin https://github.com/my-username/test.git
git push -u origin main
  • Refresh to confirm your code is on GitHub

Getting your code online with Vercel

  • Go to https://www.vercel.com
  • Login using GitHub or create an account
  • Click to Import Project
  • Import Git Repository
  • Add the URL to your repo, something like https://github.com/my-username/test

And that's it! Pretty simple to get a NextJS app with TypeScript up and running. You can also check out the Vercel command line tool if you're interested in other JamStack frameworks and would like a simple way to get started.

© 2020 | Alex Fenwood Hughes