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

Smooth Animations With React and Framer Motion

Animation

Here Are 6 Awesome React Hooks

10 useful things in the javascript string, and array.

Deploy Angular App Using Azure DevOps Build and Release Pipelines

Okhttp3 Authenticator — 401 Unauthorized

Clojure Re-Frame Exercise

Building a Simple Restful Web Service Using ExpreeJS, Mongoose, Body-Parser and MongoDB

Building Real-time ReactJS Applications with Socket.Io

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
BleatinGoat

BleatinGoat

TypeScript, GraphQL, React, Next.js

More from Medium

Absolute paths in React using craco (feat. TypeScript and ts-jest)

An endless straight road on a desert area

Handling Previews in a Headless Architecture — Strapi and Next.js

next-export-i18n v1.3.0: respecing the user’s default language

User Authentication with Google Next-Auth