Как настроить TypeScript + Next.js

Next.js — это потрясающий фреймворк React.
В этой статье описывается, как установить TypeScript + Next.js.

nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Вход в полноэкранный режим Выход из полноэкранного режима

ссылки:
https://github.com/nvm-sh/nvm

Узел

nvm install stable --latest-npm
nvm use stable
Войти в полноэкранный режим Выход из полноэкранного режима

Установите

npx create-next-app@latest --typescript
Вход в полноэкранный режим Выход из полноэкранного режима

ссылки:
https://nextjs.org/docs/getting-started

Запустить

npm run dev
Войти в полноэкранный режим Выйти из полноэкранного режима

Проверить
http://localhost:3000/

Установка абсолютного пути

Переместите файлы исходного кода в каталог src.

mkdir src
mv pages  src/
mv styles src/
Вход в полноэкранный режим Выход из полноэкранного режима
# tsconfig.json

{
  "compilerOptions": {
    # ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  # ...
}
Войти в полноэкранный режим Выход из полноэкранного режима
// src/pages/_app.tsx

import '@/styles/globals.css'
// ...
Войти в полноэкранный режим Выход из полноэкранного режима

Проверьте
http://localhost:3000/

Удалите файлы примеров

rm src/pages/index.tsx
rm src/styles/Home.module.css
rm src/pages/api/hello.ts
rm public/vercel.svg
Войти в полноэкранный режим Выйти из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий