## ★★★★★ How to make NextJs & Typescript getStart

## 1. insatll typescript

:::info

yarn global add typescript

:::

* install tsconfig.json

:::info

sudo apt install node-typescript
tsc \--init

:::

* install basic next lib

:::info

npm install next react react-dom typescript @types/node @types/react @types/react-dom autoprefixer postcss tailwindcss eslint eslint-config-next

:::

:::info
### package.json add Setting
:::spoiler

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "^20.10.0",
    "@types/react": "^18.2.38",
    "@types/react-dom": "^18.2.17",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.54.0",
    "eslint-config-next": "^14.0.3",
    "next": "^14.0.3",
    "postcss": "^8.4.31",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.3.2"
  }
}

:::

## 2.

:::info
### next.config.js add base text

:::spoiler

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

:::

:::info
### postcss.config.js

:::spoiler

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

:::

:::info
### tailwind.config.ts

:::spoiler

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

:::

:::info
### tsconfig.json

:::spoiler

{
    "compilerOptions": {
      "target": "es5",
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "bundler",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve",
      "incremental": true,
      "paths": {
        "@/*": ["./*"]
      }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}  

:::

:::info
### next-env.d.ts

:::spoiler

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

:::