Next.js 14: The Complete Guide

Next.js 14: The Complete Guide

Next.js 14 brings significant improvements and new features to the popular React framework. Let's dive deep into what's new and how to use these features effectively.

Key Features in Next.js 14

1. Server Actions (Stable)

Server Actions are now stable, allowing you to write server-side code directly in your components:

javascript:app/actions.js

'use server'
async function createTodo(formData) {
const title = formData.get('title')
await db.todo.create({ data: { title } })
revalidatePath('/todos')
}

Using Server Actions in a component:

javascript:app/components/TodoForm.js

export default function TodoForm() {
return (
<form action={createTodo}>
<input type="text" name="title" />
<button type="submit">Add Todo</button>
</form>
)
}

2. Partial Prerendering (Preview)

Partial Prerendering allows you to split your page into static and dynamic parts:

javascript:app/page.js

export default async function Page() {
return (
<div>
<h1>Welcome to my store</h1>
{/ Static content /}
<FeaturedProducts />
{/ Dynamic content /}
<Suspense fallback={<LoadingCart />}>
<ShoppingCart />
</Suspense>
</div>
)
}

3. Improved App Router

The App Router now includes better error handling and nested layouts:

javascript:app/layout.js

export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav>
{/ Navigation components /}
</nav>
{children}
<footer>
{/ Footer content /}
</footer>
</body>
</html>
)
}

4. Enhanced Data Fetching

javascript:app/posts/page.js

async function getPosts() {
const res = await fetch('https://api.example.com/posts', {
next: {
revalidate: 3600, // Revalidate every hour
tags: ['posts']
}
})
return res.json()
}
export default async function Posts() {
const posts = await getPosts()
return (
<div className="grid gap-4">
{posts.map(post => (
<article key={post.id} className="p-4 border rounded">
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</article>
))}
</div>
)
}

<Callout type="info" title="Data Fetching Best Practices"> Always use proper caching strategies and error handling in your data fetching logic:

javascript:app/lib/fetch.js

async function fetchWithErrorHandling(url, options = {}) {
try {
const res = await fetch(url, options)
if (!res.ok) throw new Error(HTTP error! status: ${res.status})
return await res.json()
} catch (error) {
console.error('Fetch error:', error)
throw error
}
}

</Callout>

5. Metadata API Improvements

javascript:app/blog/[slug]/page.js

export async function generateMetadata({ params }) {
const post = await getPost(params.slug)
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.coverImage],
},
}
}

Production Deployment

Always test your application in production mode before deploying:

  • Run npm run build
  • Check for any build errors
  • Test performance with Lighthouse
  • Verify all environment variables

References

Mastodon