Introduction to Next.js

Next.js is a tool that simplifies building websites with React. It provides automatic routing, performance improvements, and options to render pages on the server or during build time so that you can concentrate on your app.

Server Components

Server Components run only on the server. They can get data and create HTML without sending additional JavaScript to the browser. This helps keep your pages fast and lightweight.

Script, Link, and Image

The Script component helps load external scripts in the right order. The Link component allows you to navigate between pages without reloading the entire page. The Image component optimises pictures automatically (resizing and lazy loading) so they load quickly and look sharp.

Creating API Routes

You can create backend endpoints right in your Next.js project. Just place a file in the API folder, and it becomes an HTTP endpoint for sending or receiving JSON—no separate server is needed.

Server Actions

Server Actions (currently experimental) let you write functions that run on the server but can be called from your pages. Think of them as built-in API calls that require no extra setup.

Middleware

Middleware runs before your pages or APIs. Use it to check if someone is logged in, redirect them, or add headers. This helps you control access and behaviour across your site.

Auth.js (NextAuth)

Auth.js is a plugin for adding login and signup features to Next.js. It supports many providers (like Google or GitHub) and manages sessions for you, making authentication easy.

Dynamic Routes

Dynamic routes use file names like [id].js so pages can change based on the URL. This is great for user profiles, blog posts, or any page that needs a custom path.

Layouts

Layouts let you wrap groups of pages in shared design elements, like a header, footer, or sidebar. You can nest them to build complex page structures without repeating code.

Next Navigation

Next Navigation gives you tools to navigate smoothly within your app. You can push or replace URLs and prefetch pages for faster loading.

SSR, SSG, and ISR

SSR (Server-Side Rendering) creates fresh HTML for each request. SSG (Static Site Generation) builds pages just once at build time. ISR (Incremental Static Regeneration) updates static pages in the background occasionally.

Environment Variables

Store secrets and settings in .env files. Variables without NEXT_PUBLIC_ are server-only. Those with NEXT_PUBLIC_ can be used safely in browser code.

Styled JSX

Styled JSX allows you to write CSS directly inside your components. The styles are scoped, meaning they apply only to that component, avoiding conflicts with other parts of your app.

Challenges faced and solutions

1. Challenge: I kept trying to use browser features, like useState, in server-only code, which didn’t work.

   Solution: I started naming my files with .server.jsx for server code and .client.jsx for client code. I then created small server components that only fetched data and added actions gradually. This helped clarify what should go where.

2. Challenge: I struggled to decide when to render pages: every visit, at build time, or later. My pages were either outdated or rebuilding too often.

   Solution: I made a simple rule:

   • If data changes every visit, use SSR.

   • If data rarely changes, use SSG.

   • If data sometimes changes, use ISR with a 60-second revalidation. This fixed my timing issues.

3. Challenge: My nested layouts didn’t match my URLs, causing the wrong menu item to be highlighted.

   Solution: I drew my routes on paper first. I used one main layout and added extra layouts only when needed. I also used Next’s usePathname to highlight the correct link. Visualising it helped me understand better.

Resources used

1. Code With Harry: I have explored this resource to learn the above concepts