To create a Next.js 14 project with routing and Server Components, you'll use the latest App Router. Here’s a step-by-step template and examples, based on the official Next.js documentation and best practices: --- ## 1. Setup Create a new Next.js 14 project (run this in your terminal): ```bash npx create-next-app@latest your-app-name cd your-app-name ``` Choose the **"use App Router"** option when prompted. --- ## 2. Directory Structure (App Router) Your routes go in the `/app` directory. Example: ``` /app /page.js // root route ("/") /about /page.js // "/about" /blog /[slug] /page.js // "/blog/[slug]" /dashboard /layout.js // nested layout for dashboard /page.js // "/dashboard" ``` --- ## 3. Example: Root Page (Server Component) `app/page.js` ```jsx export default function Page() { return

Welcome to Next.js 14!

} ``` --- ## 4. Example: Dynamic Route (Server Component) `app/blog/[slug]/page.js` ```jsx export default async function Page({ params }) { // params.slug is your dynamic parameter return

Blog Post: {params.slug}

} ``` --- ## 5. Example: Nested Layout and Routing `app/dashboard/layout.js` ```jsx export default async function DashboardLayout({ children }) { return (

Dashboard

{children}

) } ``` `app/dashboard/page.js` ```jsx export default function DashboardHome() { return

This is the dashboard home.

} ``` --- ## 6. Using a Client Component (for Interactivity) `app/components/Counter.js` ```jsx 'use client' import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return ( ) } ``` You can use `` inside your server `page.js` or `layout.js`. --- ## 7. Data Fetching in Server Components You can fetch data directly in Server Components: ```jsx export default async function Page() { const res = await fetch('https://jsonplaceholder.typicode.com/posts/1') const post = await res.json() return

{JSON.stringify(post, null, 2)}

} ``` --- ## 8. Using Links for Routing ```jsx import Link from 'next/link' export default function Navigation() { return ( ) } ``` --- ## Summary - Place your route files in the `/app` directory. - Server Components (the default) fetch data and render HTML on the server. - Use the `'use client'` directive for interactive components. - Use nested layouts for complex apps. - Use `params` for dynamic routes (e.g., `[slug]`). Let me know if you want a fully working folder structure or more advanced examples (API routes, middleware, rewrites, server actions, etc)!

Next.js 14 App with Routing & Server Components

openai/gpt-4.1

Traces

No span selected