# Getting Started with Next.js 14

Next.js 14 brings exciting new features and improvements that make building React applications even better. Let's explore what's new and how to get started.

## What's New in Next.js 14

### 1. Turbopack (Stable)

Next.js 14 includes a stable version of Turbopack, which provides significantly faster local development.

```bash
# Enable Turbopack for development
npm run dev -- --turbo
```

### 2. Server Actions (Stable)

Server Actions are now stable, allowing you to run server-side code directly from your components.

```jsx
async function createUser(formData) {
'use server'

const name = formData.get('name')
const email = formData.get('email')

// Save to database
await db.user.create({ name, email })
}

export default function UserForm() {
return (

)
}
```

### 3. Partial Prerendering (Preview)

Partial Prerendering allows you to combine static and dynamic content in a single route.

## Getting Started

### Installation

Create a new Next.js 14 project:

```bash
npx create-next-app@latest my-app
cd my-app
npm run dev
```

### Project Structure

Next.js 14 uses the App Router by default:

```
app/
layout.tsx # Root layout
page.tsx # Home page
about/
page.tsx # About page
api/
users/
route.ts # API route
```

### Creating Pages

Pages are created by adding files to the app directory:

```jsx
// app/about/page.tsx
export default function About() {
return

About Page

}
```

### Layouts

Layouts wrap pages and can be nested:

```jsx
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (

{children}

)
}
```

## Data Fetching

### Server Components

Fetch data directly in Server Components:

```jsx
async function getData() {
const res = await fetch('https://api.example.com/data')
return res.json()
}

export default async function Page() {
const data = await getData()

return

{data.title}

}
```

### Client Components

Use the 'use client' directive for interactive components:

```jsx
'use client'

import { useState } from 'react'

export default function Counter() {
const [count, setCount] = useState(0)

return (

)
}
```

## Conclusion

Next.js 14 provides powerful tools for building modern React applications. With features like Turbopack, stable Server Actions, and improved performance, it's an excellent choice for your next project.