React + Next.js: Build Fast, SEO-Friendly Web Apps — A Practical Tutorial

At Hashstart Academy we teach practical, hands-on web development. In this tutorial you'll learn how to set up a modern React + Next.js project, why Next.js improves SEO and performance, and how to deploy your app to production. By the end you'll have a small, production-ready app and the skills to scale it.

Why use Next.js?

Server-side rendering (SSR) & static generation — better SEO and faster perceived load.
File-based routing — simple, predictable routes using the pages/app directory.
Built-in optimizations — Image component, code splitting, and more.
Easy deployment — Vercel or other providers with zero-config builds.

Prerequisites

Basic knowledge of JavaScript and React (components, hooks) is helpful. You’ll need Node.js installed (LTS recommended) and a code editor like VS Code.

1. Create a new Next.js app

Use the official starter:

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

Open http://localhost:3000 and you’ll see the starter app.

2. File-based routing

Create pages under pages/ (or use the app router in newer Next.js versions). Example:

// pages/index.js
export default function Home() {
  return <h1>Welcome to Hashstart Academy</h1>;
}

3. Data fetching: SSG vs SSR vs Client-side

Next.js offers three common methods for fetching data:

getStaticProps — build-time data (best for blog posts, marketing pages).
getServerSideProps — server-side rendering per request (good for user-personalized pages).
Client-side fetch — using useEffect & fetch for dynamic interactions.

// pages/blog/[slug].js (example using getStaticProps)
export async function getStaticPaths() {
  // return list of blog slugs
  return { paths: [], fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const post = await fetchPostFromCMS(params.slug);
  return { props: { post }, revalidate: 60 };
}

4. SEO best practices

Use the <Head> component to set title, meta description and open graph tags.
Prefer static generation for public content so crawlers receive full HTML.
Use semantic HTML & structured data for rich snippets.

// Example meta tags
import Head from 'next/head';

function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title} - Hashstart Academy</title>
        <meta name="description" content={post.excerpt} />
      </Head>
      <article>...</article>
    </>
  );
}

5. Image optimization

Use Next.js <Image /> for automatic resizing, lazy loading and format selection.

6. API routes (lightweight backend)

Create server endpoints in pages/api/ to handle forms, webhooks or small server actions without a separate server.

// pages/api/contact.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // process contact form
    return res.status(200).json({ ok: true });
  }
  res.status(405).end();
}

7. Deployment

Deploy to Vercel for tight Next.js support: connect your repo, set env variables, and trigger a deploy. Other platforms like Netlify or Render also work.

8. Performance tips

Audit with Lighthouse and address large JavaScript bundles.
Prefer static assets and caching headers.
Use code-splitting and dynamic imports for heavy libs.

Complete example structure

my-next-app/
├─ pages/
│  ├─ index.js
│  ├─ blog/
│  │  └─ [slug].js
│  └─ api/
│     └─ contact.js
├─ components/
│  └─ Header.js
├─ public/
│  └─ images/
└─ package.json

Next steps — what to build

Try building a simple blog with markdown files or a headless CMS, add pagination, and implement an admin CMS to create posts (we cover this in our advanced course).

Resources

Official Next.js docs
Hashstart Academy: Full-stack course (React + Next.js)
Articles on SSR, SSG and ISR

Ready to learn hands-on? Join Hashstart Academy’s next batch and we'll guide you from project setup to deployment, with code reviews and real-world assignments. View Courses →