https://www.udemy.com/course/next-js-the-complete-developers-guide/
- Stephen Grider - Complete Developers Guide
npx create-next-app@latest- setup project
- note: should use
src/folder
src/app- directories with
page.tsxmeans a new route - route must have
export defaultof a react component - url uses folder name
- linking between pages
//src/pages.tsx
import Link from 'next/link';
export default function Home() {
return (
<>
<div>
<Link href="/performance">performance</Link>
<Link href="/reliability">reliability</Link>
<Link href="/scale">scale</Link>
</div>
<div>Home</div>
</>
);
}- using a layout.tsx
- components are rendered inside layout
- UPDATE: cut from
src/pages.tsxand paste inlayout.tsx
//src/layout.tsx
import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import Link from 'next/link';
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin']
});
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin']
});
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app'
};
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<div>
<Link href="/">Home</Link>
<Link href="/performance">performance</Link>
<Link href="/reliability">reliability</Link>
<Link href="/scale">scale</Link>
</div>
{children}
</body>
</html>
);
}- dont bloat layout.tsx
- extract to its own file
- but dont put in app/ since this folder has routes
- extract the header to its own file (outside the app/ folder)
- in src/app/layout.tsx import the header
//src/components/header.tsx
import Link from 'next/link';
export default function Header() {
return (
<div>
<Link href="/">Home</Link>
<Link href="/performance">performance</Link>
<Link href="/reliability">reliability</Link>
<Link href="/scale">scale</Link>
</div>
);
}- instead of using relative path imports
- nextjs has alias which uses absolute path from
srcdirectory
import Header from '@/components/Header';- download images.zip
- NOTE: on the lesson, they import with
publickeyword along static images - but after nextjs v14.2 of Next or higher, update
tsconfig.json
// tsconfig.json
"paths": {
"@/*": ["./src/*"],
"public/*": ["./public/*"]
}- extract images.zip to
public/ - instead of using
<img>tags - nextjs has
<Image>component <Image/>automatic image optimization
//src/page.tsx
import Image from 'next/image';
import homeImg from 'public/home.jpg';
export default function Home() {
return (
<div className="absolute -z-10 inset-0">
<Image alt="car factory" src={homeImg} fill style={{ objectFit: 'cover' }} />
</div>
);
}-
<Image>component solveslayout shifting -
placeholder needs to know its size (width/height) 3 options:
- local image (public/) -> get dimensions from imported image
- asign width/height as props (sets defined dimensions)
- use
fillprop
//components/hero.tsx
import type { StaticImageData } from 'next/image';
import Image from 'next/image';
interface HeroProps {
imageData: StaticImageData;
imgAlt: string;
title: string;
}
export default function Hero(props: HeroProps) {
return (
<div className="relative h-screen">
<div className="absolute -z-10 inset-0">
<Image alt={props.imgAlt} src={props.imageData} fill style={{ objectFit: 'cover' }} />
<div className="absolute inset-0 bg-gradient-to-r from-slate-900" />
</div>
<div className="pt-48 flex justify-center items-center">
<h1 className="text-white text-6xl">{props.title}</h1>
</div>
</div>
);
}//src/components/header.tsx
import Link from 'next/link';
export default function Header() {
return (
<div className="w-full absolute text-white z-10">
<nav className="container relative flex flex-wrap items-center justify-between mx-auto p-8">
<Link href="/" className="font-bold text-3xl">
Home
</Link>
<div className="space-x-4 text-xl">
<Link href="/performance">performance</Link>
<Link href="/reliability">reliability</Link>
<Link href="/scale">scale</Link>
</div>
</nav>
</div>
);
}- deploy to vercel
npx vercelLog in to Vercel Continue with GitHub
> Success! GitHub authentication complete for: 'email'
? Set up and deploy “~\Downloads\code\nextjs\nextjs-stephen-grider-complete-developers-guide”? yes
? Which scope should contain your project? clarklindev
? Link to existing project? no
? What’s your project’s name? nextjs-stephen-grider-complete-developers-guide
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: Next.js default
? Want to modify these settings? no