N Akita's Blog

Next.js ​

Directory Structure ​

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── next-env.d.ts
├── package.json
├── package-lock.json
└── tsconfig.json

Install ​

sh
npm install next@latest react@latest react-dom@latest
sh
npm install -D @types/node @types/react typescript

package.json ​

json
{
  "name": "@apps/nextjs",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^15.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/node": "^22.10.1",
    "@types/react": "^18.3.12",
    "typescript": "^5.7.2"
  }
}

layout ​

tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

page ​

tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Run ​

sh
npm run dev

Accesse Browser ​

http://localhost:3000/

img

Tailwind CSS ​

Install ​

sh
npm install -D tailwindcss postcss autoprefixer
sh
npx tailwindcss init -p

Directory Structure ​

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── next-env.d.ts
├── package.json
├── postcss.config.js
├── styles
│   └── global.css
├── tailwind.config.js
└── tsconfig.json

tailwind.config.js ​

js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

global.css ​

css
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  @apply h-full bg-black;
}

body {
  @apply h-full bg-black;
}

Apply ​

layout.tsx ​

tsx
import '../styles/global.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

page.tsx ​

tsx
export default function Page() {
  return <h1 className="text-3xl text-sky-500">Hello, Next.js!</h1>
}

Accesse Browser ​

http://localhost:3000/

img

© nakita628.github.io/blog