Build Next.js apps with routing, layouts, SSR/CSR, auth, SEO, and performance optimization.
Routing
Layouts
app/layout.tsx or pages/_app.tsx depending on Next.js versionSSR/CSR
getServerSideProps or getStaticProps for server-side renderingAuth
SEO
next/head to set meta tagsPerformance
next/image// app/layout.tsx (Next.js 13+)
import React from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<title>My Next.js App</title>
<meta name="description" content="SEO-friendly Next.js application" />
</head>
<body>
<Header />
<main>{children}</main>
<Footer />
</body>
</html>
);
}
// pages/index.tsx
import React from "react";
import Link from "next/link";
export default function Home() {
return (
<div className="container mx-auto p-4">
<h1 className="text-3xl font-bold">Welcome to Next.js App</h1>
<p>Build fast, SEO-friendly, and secure applications.</p>
<Link href="/dashboard" className="text-blue-600 mt-2 inline-block">
Go to Dashboard
</Link>
</div>
);
}
// pages/dashboard.tsx (protected)
import { getSession } from "next-auth/react";
export async function getServerSideProps(context) {
const session = await getSession(context);
if (!session) {
return { redirect: { destination: "/login", permanent: false } };
}
return { props: { user: session.user } };
}
export default function Dashboard({ user }) {
return <h1>Welcome, {user.name}</h1>;
}