Next.js
Directory Structure
.
├── app
│ ├── layout.tsx
│ └── page.tsx
├── next-env.d.ts
├── package.json
├── package-lock.json
└── tsconfig.jsonInstall
sh
npm install next@latest react@latest react-dom@latestsh
npm install -D @types/node @types/react typescriptpackage.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 devAccesse Browser
http://localhost:3000/
Tailwind CSS
Install
sh
npm install -D tailwindcss postcss autoprefixersh
npx tailwindcss init -pDirectory Structure
.
├── app
│ ├── layout.tsx
│ └── page.tsx
├── next-env.d.ts
├── package.json
├── postcss.config.js
├── styles
│ └── global.css
├── tailwind.config.js
└── tsconfig.jsontailwind.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>
}