Quick Guide to Next.js with TypeScript — Part 1

Purpose of this multi-post guide is to get you started with TypeScriptin Next.js with as less manoeuvring through documentation as possible.

In part 1, we are going to
1. Bootstrap our new Next.jsproject.
2. Configure TypeScript
3. Build a basic strictly typed view and a component

Time to spin-up a new Next.jsapp using
npx create next-app --typescript <YOUR_APP_NAME> for bare minimum views/components andtypescriptalready configured. Your installation should be complete and you should be ready to run your new Next.jsapp with yarn devexcept…

Error: > Couldn’t find a `pages` directory. Please create one under the project root

Let’s create a new directory under root named pagesand also our default page named index.tsx with code below(default page must be named index.tsx for next.js routing to pick it up as our default view). We import type NextPage to assign to our Homepage from next

Now, try running yarn dev. If you run into issue where it asks you to install typescript and @types/react. Go ahead and do that. This is to make our app understand that we are going to be writing type-safe code.

Now when you run yarn dev you will see webpackserver running your app on http://localhost:3000. One last thing to configure is to set typescript compiler option to strict by reaching inside tsconfig.json and setting strict to true.This will ensure that you have highest type-satefy enabled in your project.

Let’s create a simple but strictly typed component that shows today’s date.
Create a directory named components under root and create a file named Now.tsx and enter following code.

As you can see we are making sure that component <Now /> accepts nothing but Dateobject and therein lies the magic of TypeScript

Now, import <Now /> component in index.tsx like below.

If you see the screen below (except you should see your current date), congratulations! You have successfully set up TypeScriptwith your Next.js project.

See you in part 2.




TypeScript, GraphQL, React, Next.js

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Workaround made Solana Minting NFT Candy Machine V2.

deno and oak with mongoDB and Redis

How to use Redis with Node.js (ioredis)

Highlights from React Live Amsterdam 2019

Google Sheets to HTML table


Next.js — React Server-Side Rendering Done Right

Automatic ip address calculation using javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


TypeScript, GraphQL, React, Next.js

More from Medium

Data Fetching with Next JS-Demystified

Re-assigning a value to UseParams hook using useState hook.

React — Universal Container

React Universal Container

Pith instructions to Deploy a Next JS application to your own server