Next.js环境搭建 #

node -v

brew install node

choco install nodejs

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

nvm install 20
nvm use 20
nvm alias default 20

npm install -g pnpm

npm install -g yarn

curl -fsSL https://bun.sh/install | bash

npx create-next-app@latest my-nextjs-app

What is your project named? my-nextjs-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? Yes
Would you like to use Turbopack for `next dev`? Yes
Would you like to customize the import alias? No

npx create-next-app@latest my-nextjs-app \
    --typescript \
    --tailwind \
    --eslint \
    --app \
    --src-dir \
    --turbopack \
    --import-alias "@/*"

npx create-next-app@latest my-app

yarn create next-app my-app

pnpm create next-app my-app

bunx create-next-app my-app

my-nextjs-app/
├── src/
│   └── app/
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       ├── page.tsx
│       └── page.module.css
├── public/
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── .eslintrc.json
├── .gitignore
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
└── tsconfig.json

{
  "name": "my-nextjs-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.0",
    "postcss": "^8",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
    /* config options here */
}

export default nextConfig

{
  "compilerOptions": {
    "target": "ES2017",
    "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,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

src/app/
├── favicon.ico          # 网站图标
├── globals.css          # 全局样式
├── layout.tsx           # 根布局
├── page.tsx             # 首页
└── page.module.css      # 首页样式模块

npm run dev

   ▲ Next.js 15.2.0
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 1.8s

npm run dev -- -p 4000

npm run dev -- -H 0.0.0.0

npm run dev -- --experimental-https

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

{
  "extends": ["next/core-web-vitals", "next/typescript"],
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}

npm install -D prettier eslint-config-prettier

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5",
  "printWidth": 100
}

{
  "scripts": {
    "format": "prettier --write ."
  }
}

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss"
  ]
}

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local
.env

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb

console.log(process.env.NEXT_PUBLIC_API_URL)

console.log(process.env.DATABASE_URL)

namespace NodeJS {
    interface ProcessEnv {
        NEXT_PUBLIC_API_URL: string
        DATABASE_URL: string
    }
}

# macOS/Linux
lsof -i :3000
kill -9 <PID>

# 或使用其他端口
npm run dev -- -p 3001

# 清除缓存
rm -rf node_modules
rm -rf .next
rm package-lock.json

# 重新安装
npm install

# 重新生成类型
rm -rf .next
npm run dev