Next.js Setup & Configuration Guide
π Project Initialization
Getting started with a new Next.js project is straightforward, but proper configuration from the beginning saves time and ensures best practices.
Creating a New Project
npx create-next-app@latest my-project-name
The CLI will prompt you for several options:
- TypeScript support
- ESLint configuration
- Tailwind CSS integration
- App Router (recommended)
- Import alias configuration
π¨ Tailwind CSS Setup
Tailwind CSS provides utility-first styling that pairs perfectly with Next.js components.
Step-by-Step Installation
-
Create your Next.js project:
npx create-next-app NAME_OF_PROJECT cd NAME_OF_PROJECT
-
Install Tailwind CSS and dependencies:
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p
-
Configure
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: {}, }, plugins: [], }
-
Configure
globals.css
:@tailwind base; @tailwind components; @tailwind utilities;
Tailwind with App Router
If using the App Router, ensure your globals.css
is imported in your root layout:
// app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
πΊοΈ Internationalization (i18n)
Next.js provides built-in support for internationalized routing, making it easy to create multilingual applications.
Configuration
Documentation: Next.js Internationalization Routing
Basic Setup
-
Configure
next.config.js
:/** @type {import('next').NextConfig} */ const nextConfig = { i18n: { locales: ['en', 'es', 'fr'], defaultLocale: 'en', domains: [ { domain: 'example.com', defaultLocale: 'en', }, { domain: 'example.es', defaultLocale: 'es', }, ], }, } module.exports = nextConfig
-
Access locale in components:
import { useRouter } from 'next/router' function MyComponent() { const router = useRouter() const { locale, locales, defaultLocale } = router return ( <div> <p>Current locale: {locale}</p> <p>Available locales: {locales?.join(', ')}</p> </div> ) }
Routing Patterns
With i18n configured, Next.js automatically handles:
/
β/en
(default locale)/about
β/en/about
/es/about
β Spanish version/fr/about
β French version
π§Ύ Metadata Optimization
The new Metadata API in Next.js App Router provides powerful SEO and social sharing optimization.
Basic Metadata
Documentation: Metadata API in Next.js
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'My App',
description: 'This is my awesome Next.js application',
keywords: ['Next.js', 'React', 'Web Development'],
}
Dynamic Metadata
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
type Props = {
params: { slug: string }
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await fetchPost(params.slug)
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.image],
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.excerpt,
images: [post.image],
},
}
}
Metadata Templates
// app/layout.tsx
export const metadata: Metadata = {
title: {
template: '%s | My App',
default: 'My App',
},
description: 'The best Next.js application',
}
// app/about/page.tsx
export const metadata: Metadata = {
title: 'About', // Will become "About | My App"
}
βοΈ Additional Configuration
Environment Variables
Create .env.local
for local development:
# .env.local
DATABASE_URL="your-database-url"
API_KEY="your-api-key"
NEXT_PUBLIC_APP_URL="http://localhost:3000"
Variables prefixed with NEXT_PUBLIC_
are available in the browser.
TypeScript Configuration
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "es6"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/components/*": ["./src/components/*"],
"@/utils/*": ["./src/utils/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
ESLint Configuration
// .eslintrc.json
{
"extends": ["next/core-web-vitals", "next/typescript"],
"rules": {
"@next/next/no-img-element": "error",
"@next/next/no-html-link-for-pages": "error"
}
}
π Recommended Project Structure
my-next-app/
βββ app/ # App Router (Next.js 13+)
β βββ globals.css
β βββ layout.tsx
β βββ page.tsx
β βββ api/
βββ components/ # Reusable components
β βββ ui/ # Basic UI components
β βββ features/ # Feature-specific components
βββ lib/ # Utility functions
βββ public/ # Static assets
βββ types/ # TypeScript type definitions
βββ next.config.js
βββ tailwind.config.js
βββ package.json
This setup provides a solid foundation for scalable Next.js applications with modern tooling and best practices built in.