How to set up a Next.js project with TypeScript and React ?

I will guide you step by step to configure a Next.js project. Include things like: Typescript, Graphql API router, Setting up a local MySQL server(Docker)

Step 1: Create a Next.js app

To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:

Let’s check to see if it’s working. Open http://localhost:3000 from your browser. Here’s the result if it works well:

Step 2: Config Typescript

1. Create file: tsconfig.json
2. Check the node version: node -v
3. After you have checked the node version, run the following commands:

Check the tsconfig.json file again and see the changes. If you don’t see anything, you haven’t configured it successfully

4. Update tsconfig.json file

It is imperative to follow the rules of Typescript

5. Convert the files in pages directory into tsx and ts

Step 3: Graphql API router

1. Create the file graphql.ts
2. Copy the code here and paste it into the graphql.ts just created file: git
3. Run the following command

Let’s check to see if it’s working. Open http://localhost:3000/api/graphql from your browser. Here’s the result if it works well:

Step 4: Set up a local MySQL server

1. Make sure you have installed Docker successfully and understand the basics of it
2. Create and configure the docker-compose.yml file (in the root directory at the same level as the package.json file)
3. Copy the code here into the file you just created:

version: '3.1'
services:
mysql:
image: mysql
command: --default-authentication-plugin=mysql_native_password
restart: always
environment:
MYSQL_ROOT_PASSWORD: myrootpassword
MYSQL_USER: development
MYSQL_PASSWORD: development
MYSQL_DATABASE: task_mate
ports:
- 127.0.0.1:3306:3306

4. Run the following command:

5. Create the file .env.local (in the root directory at the same level as the package.json file) and copy the content below:

MYSQL_HOST=localhost
MYSQL_USER=development
MYSQL_DATABASE=task_mate
MYSQL_PASSWORD=development

In Conclusion

So I finished instructing you “How to set up a Next.js project with TypeScript and React ?”

I hope you will have a good experience with it :)