We’ll skip the introductory BS and get straight into this guide. You can see the finished project in this Github repo. If you check the commit history, I’ve created commits for each “step” of this process.

Technologies

• Next.js — SSR React
• Eslint — Code style/formatting
• TypeScript — Typed version of JavaScript
• Jest — Component testing Library
• Enzyme — Testing utility for Jest
• Storybook — Component building tool

Setup Next.js and TypeScript

First, we’ll start by creating a new Next.js project with TypeScript. Open up your terminal and run:

yarn create next-app

Follow any prompts this tool gives you, and you should have an initialized Next.js project!

Next, create a tsconfig.json file with the following command:

touch tsconfig.json

Install some TypeScript dependencies:

yarn add --dev typescript @types/react @types/node

Then start the Next.js app with yarn dev to automatically fill out the tsconfig.json .

We’ll convert index.js to index.tsx and convert our HomePage component to a lambda function, then add a proper type:

const Home: React.FC = () => {
  // The rest of the component
  // ...
}
export default Home;

Awesome, now we have TypeScript and Next.js playing well together! The next step is setting up eslint.

#react #javascript #nextjs