Hackforge Academy

Explanation

Next.js is a React framework used to build fast, scalable, and SEO-friendly web applications with both frontend and backend capabilities in one project.

Code:

// Create Next.js app
npx create-next-app@latest my-app

Explanation

Next.js supports server-side rendering (SSR), which improves performance and SEO by rendering pages on the server before sending them to the browser.

Code:

// Example: Server-side rendering
export async function getServerSideProps() {
  return { props: { data: 'SSR Example' } };
}

Explanation

Next.js provides file-based routing, meaning each file inside the pages or app folder automatically becomes a route.

Code:

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

Explanation

Next.js supports static site generation (SSG), allowing pages to be generated at build time for faster performance.

Code:

// Example: Static generation
export async function getStaticProps() {
  return { props: { data: 'SSG Example' } };
}

Explanation

Next.js includes built-in API routes, allowing backend functionality without a separate server like Express.

Code:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ 
message: 'Hello API' 
});
}

Explanation

Next.js provides automatic code splitting and optimization to improve loading speed and performance.

Code:

// Automatically optimized per page load
export default function Home() {
  return <h1>Optimized Page</h1>;
}

Explanation

Next.js supports built-in CSS, Tailwind, and image optimization features for modern UI development.

Code:

import Image from 'next/image';

<Image src="/profile.png" width={200} 
height={200} alt="profile" />