Index

• Introduction
• Create App
  • From a new project
  • From a existing project

Introduction

In this article I'll present to you how to create an app with Next.JS and Typescript in the correct way

Using Create Next App

The most easiest way to create an app with Next.JS and Typescript is using the default create next app. First step open your terminal an type this:

1# using npm
2npx create-next-app --ts
3
4# using yarn
5yarn create next-app --ts
6

---

From a existing project

If you already have an Next.JS project and want to add Typescript, follow these steps:

1. Install Typescript

Opens terminal and run:

1# using npm
2npm install --save-dev typescript @types/react @types/node
3
4#using yarn
5yarn add -D typescript @types/react @types/node
6

2. Configure Typescript

Still in terminal type:

1# using npm
2npx tsc --init
3
4# using yarn
5yarn tsc --init
6

3. File extensions

Now the Typescript has been set up in your project, we can use it, just need to change the files extensions existing in pages directory from archive.js or archive.jsx to archive.ts or archive.tsx.

After that, you are now ready to enjoy the Typescript benefices. Happy Hacking and Drink Coffee!