DEV Community

Junichi Takahashi
Junichi Takahashi

Posted on

How to set up TypeScript + Next.js

#typescript #javascript #nextjs

Next.js is awesome React framework.
This article describes how to set up TypeScript + Next.js.

nvm 

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

refs:
https://github.com/nvm-sh/nvm

Node 

nvm install stable --latest-npm
nvm use stable
Enter fullscreen mode Exit fullscreen mode

Instal 

npx create-next-app@latest --typescript
Enter fullscreen mode Exit fullscreen mode

refs:
https://nextjs.org/docs/getting-started

Run 

npm run dev
Enter fullscreen mode Exit fullscreen mode

Check
http://localhost:3000/

Setting absolute path

Move source code files to src dir.

mkdir src
mv pages  src/
mv styles src/
Enter fullscreen mode Exit fullscreen mode 
# tsconfig.json

{
  "compilerOptions": {
    # ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  # ...
}
Enter fullscreen mode Exit fullscreen mode 
// src/pages/_app.tsx

import '@/styles/globals.css'
// ...
Enter fullscreen mode Exit fullscreen mode

Check
http://localhost:3000/

Remove example files 

rm src/pages/index.tsx
rm src/styles/Home.module.css
rm src/pages/api/hello.ts
rm public/vercel.svg
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

palo profile image

jComponent — Total.js

Pavol -

sameeranthony profile image

Exploring the Versatility of Web Scraping APIs for Data Extraction

sameer -

himanshuaggar profile image

What's New with React in v19 ?

Himanshu Aggarwal -

anishghimire862 profile image

Bun Runtime - Introduction (Part 1)

Anish Ghimire -