npx create-next-app@latest
app/
layout.tsx # Root layout
page.tsx # Home page
public/ # Static assets
export default function About() {
return (
<div>
<h1>About Us</h1>
<p>Welcome to our Next.js 14 tutorial!</p>
</div>
);
} // app/blog/page.tsx
async function getPosts() {
const res = await fetch('https://api.example.com/posts');
return res.json();
}
export default async function BlogPage() {
const posts = await getPosts();
return (
<div>
<h1>Blog Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
} // app/contact/page.tsx
'use server';
export async function submitForm(formData: FormData) {
const name = formData.get('name');
// Save to database or send email
console.log("Received message from 'name'");
}
// Client Component
export default function ContactPage() {
return (
<form action={submitForm}>
<input type="text" name="name" required />
<button type="submit">Send</button>
</form>
);
} // app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<nav>Main Navigation</nav>
<main>{children}</main>
</body>
</html>
);
} // app/blog/page.tsx
async function getPosts() {
const res = await fetch('https://api.example.com/posts');
return res.json();
}
export default async function BlogPage() {
const posts = await getPosts();
return (
<div>
<h1>Blog Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
} export async function generateStaticParams() {
return [{ id: '1' }, { id: '2' }];
} fetch('https://api.example.com/data', {
next: { revalidate: 3600 } // Refresh every hour
});