This continues Module 2 of the Next.js 14 course on Coursera by Packt, covering routing fundamentals, component types, and the start of a navbar build.

Next.js 14 from Scratch

Prerequisite

You must have a good understanding of React - a framework - and JavaScript (Or TypeScript) - a language - before you can move on with this post.

File-Based Routing

In Next.js, the app folder acts as the root for all routes. Creating a subfolder inside app automatically becomes a new route. For example, adding a properties folder with a page.jsx file inside sets up the /properties route with no extra configuration needed.

Nested and Dynamic Routes

Nested routes work the same way, just with more subfolders. A file at properties/add/page.jsx creates the /properties/add route.

Dynamic routes use bracket notation like [id] to capture variable segments in the URL, so a folder named [id] can match something like /properties/123.

Catch all routes go a step further using triple dots inside brackets, like […id], which matches any path after the dynamic segment.

Linking Between Routes

The Link component from next/link handles client-side navigation, meaning pages transition without a full reload. It works better than a regular anchor tag since it keeps things fast and smooth. The lecture demonstrates this by linking from the home page to the properties page and back.

Server vs Client Components

Next.js 13 splits components into two types.

Server components render on the server by default. They are a good fit for static content, data fetching, and anything that needs secure backend access.

Client components are needed when you want interactivity. Things like event handling, React hooks such as useState and useEffect, or browser-only APIs all require a client component.

On their website, they describe this pretty well.

Useful Navigation Hooks

A few hooks from next/navigation come in handy for client components:

• useRouter allows programmatic navigation, like redirects.
• useParams grabs dynamic route parameters, such as an ID from the URL.
• useSearchParams reads query parameters from the URL.
• usePathname returns the current URL path.

📝 Small Note:

• Logs from server components show up in the terminal.
• Client component logs appear in the browser console.

Converting Theme HTML to JSX

The navbar markup comes from a theme file and gets pasted into the return statement of Navbar.jsx. A few adjustments are needed to make it valid JSX:

• HTML comments need to become JSX style comments.
• class becomes className.
• tabindex becomes tabIndex.
• SVG attributes like stroke width become camel case, such as strokeWidth.