Next.js App Template
app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
}
[data-theme="dark"] {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 84% 4.9%;
}
* {
border-color: hsl(var(--border));
}
body {
color: hsl(var(--foreground));
background: hsl(var(--background));
}
app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Next.js App',
description: 'A modern Next.js application with TypeScript and Tailwind CSS',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<div className="min-h-screen bg-background">
{children}
</div>
</body>
</html>
);
}
app/page.tsx
export default function HomePage() {
return (
<main className="container mx-auto px-4 py-8">
<div className="max-w-2xl mx-auto text-center">
<h1 className="text-4xl font-bold text-foreground mb-4">
Welcome to Next.js
</h1>
<p className="text-lg text-muted-foreground mb-8">
A modern web application built with Next.js, TypeScript, and Tailwind CSS.
</p>
<div className="flex gap-4 justify-center">
<button className="bg-primary text-primary-foreground px-6 py-2 rounded-lg hover:bg-primary/90 transition-colors">
Get Started
</button>
<button className="border border-border px-6 py-2 rounded-lg hover:bg-accent transition-colors">
Learn More
</button>
</div>
</div>
</main>
);
}
package.json
{
"name": "nextjs-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"lint:fix": "next lint --fix",
"type-check": "tsc --noEmit"
},
"dependencies": {
"next": "^14.2.18",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/node": "^22.10.1",
"@types/react": "^18.3.17",
"@types/react-dom": "^18.3.5",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.1",
"eslint-config-next": "^14.2.18",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.2"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "es6"],
"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": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['lucide-react'],
},
images: {
formats: ['image/webp', 'image/avif'],
},
};
export default nextConfig;
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
border: 'hsl(var(--border))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
},
},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
README.md
# Next.js Modern Template
A modern Next.js 14 application with App Router, TypeScript, and Tailwind CSS.
## Features
- ā” **Next.js 14** - The latest version with App Router
- šØ **Tailwind CSS** - Utility-first CSS framework
- š **TypeScript** - Full TypeScript support with strict mode
- š **Performance** - Optimized images and package imports
- šÆ **ESLint** - Code linting with Next.js config
- š§ **Modern Config** - Latest best practices and configurations
## Getting Started
Install dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development
Run the development server:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Start the production server:
```bash
# npm
npm run start
# pnpm
pnpm run start
# yarn
yarn start
# bun
bun run start
```
## Type Checking
Run TypeScript type checking:
```bash
npm run type-check
```
## Linting
Lint your code:
```bash
npm run lint
npm run lint:fix
```
## Project Structure
```
āāā app/ # App Router directory
ā āāā globals.css # Global styles
ā āāā layout.tsx # Root layout
ā āāā page.tsx # Home page
āāā public/ # Static assets
āāā next.config.js # Next.js configuration
āāā tailwind.config.js # Tailwind configuration
āāā tsconfig.json # TypeScript configuration
```
## Learn More
- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [TypeScript Documentation](https://www.typescriptlang.org/docs)
- [Deployment Documentation](https://nextjs.org/docs/deployment)
Want to update?
Subscribe to my blog to receive the latest updates from us.
Monthly articles
New articles will be created every month. No spam
All notification in other notify to you, not spam or advertising.