Next.js Complete Tutorial

<h2>Introduction</h2>
<p>Next.js is a powerful React framework for building server-rendered and static websites. In this guide, we cover everything from setup to deployment.</p>

<h3>1. Setting Up Next.js</h3>
<pre><code>npx create-next-app@latest my-next-app

cd my-next-app npm run dev</code></pre> <p>This starts the development server at <code>http://localhost:3000</code>.</p>

<h3>2. Pages and Routing</h3>
<p>Every file inside <code>pages/</code> becomes a route.</p>
<pre><code>// pages/index.js

export default function Home() { return <h1>Home Page</h1>; }

// pages/about.js export default function About() { return <h1>About Page</h1>; }</code></pre>

<h3>3. Dynamic Routes</h3>
<pre><code>// pages/posts/[id].js

import { useRouter } from 'next/router';

export default function Post() { const router = useRouter(); const { id } = router.query; return <h1>Post {id}</h1>; }</code></pre>

<h3>4. Static Generation (SSG)</h3>
<pre><code>export async function getStaticProps() {

const data = await fetch('https://api.example.com/posts').then(res => res.json()); return { props: { posts: data } }; }</code></pre>

<h3>5. Server-Side Rendering (SSR)</h3>
<pre><code>export async function getServerSideProps(context) {

const data = await fetch('https://api.example.com/posts').then(res => res.json()); return { props: { posts: data } }; }</code></pre>

<h3>6. API Routes</h3>
<pre><code>// pages/api/hello.js

export default function handler(req, res) { res.status(200).json({ message: 'Hello from Next.js API!' }); }</code></pre>

<h3>7. Styling Options</h3>
<ul>
  <li>CSS Modules</li>
  <li>Tailwind CSS</li>
  <li>Styled Components</li>
</ul>

<h3>8. Image Optimization</h3>
<pre><code>import Image from 'next/image';

<Image src="/logo.png" alt="Logo" width={100} height={100} /></code></pre>

<h3>9. Deployment</h3>
<p>Next.js apps can be deployed on Vercel, Netlify, or any Node.js server.</p>
<pre><code>vercel deploy

// Or npm run build npm start</code></pre>

<h3>Conclusion</h3>
<p>This tutorial covers core Next.js concepts. You can now build scalable, fast, and SEO-friendly React apps using Next.js.</p>