UI/UX Front-end development & Backend development

ur-style-ecommerce

In this project, I had developed an e-commerce website for a fashion brand(fictional). The website was developed using Next.JS at frontend, in backend I tested the serverless backend of Next.JS and for payment I used PayPal.

UrStyle E-Commerce

In this project, I had developed an allow list system with the game FiveM. The user needs to register on the website before join into the game.

Ilusion - Roleplay


## 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:

```bash
# using npm
npx create-next-app --ts

# using yarn
yarn create next-app --ts
```

---

## 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:

```bash
# using npm
npm install --save-dev typescript @types/react @types/node

#using yarn
yarn add -D typescript @types/react @types/node
```

### 2. Configure Typescript

Still in terminal type:

```bash
# using npm
npx tsc --init

# using yarn
yarn tsc --init
```

### 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! 



In this tutorial we will learn how to implement Next.js + Typescript in a simple project.

DW

David William

Full Stack developer

Some of my latest work

Who I am?

My personal blog posts

TUTORIAL: How to implement NextJS + Typescript