Next.js Overview

What is Next.js?

• A framework for building fast, search engine optimized React apps with zero configuration.
• Combines server-side rendering with client-side rendering.

Client-Side Rendering Drawbacks

• Content not reliably indexed by search engines.
• Longer time to first contentful paint for users.

Next.js Advantages

• Renders content on the server in advance.
• First content a user or search bot sees is fully rendered HTML.
• Subsequent interactions use traditional client-side rendering.

Project Structure in Next.js

Pages Directory

• Contains JavaScript files that export React components representing routes.
• File structure mirrors actual URLs.
• Built-in router for seamless navigation.

Data Fetching Strategies

1. Static Generation (Pre-rendering)

• Renders pages at build time.
• Use getStaticProps to fetch data and pass it as props.
• Ideal for content that doesn’t change often (e.g., blogs).

2. Server-Side Rendering (SSR)

• Builds HTML page on each request.
• Use getServerSideProps to fetch data at request time.
• Suitable for pages with frequently changing data.

3. Incremental Static Regeneration

• Regenerates static pages at intervals using a revalidate option in getStaticProps.

Getting Started with Next.js

Initial Setup

1. Open terminal.
2. Run npx create-next-app <app-name> to create a new Next.js app.
3. Navigate to the project in VS Code.
4. Run npm run dev to start the development server on localhost:3000.

Styles in Next.js

• Supports CSS modules.
• globals file for global styles.
• .module.css files for route/component specific styles.
• Import stylesheets and use them in JSX as JavaScript objects.

Building Pages and Dynamic Routes

Creating Pages

• Define pages in the pages directory.
• Export a default React component for each page.

Example: Creating a New Route

1. Create hello.js in pages directory.
2. Navigate to localhost:3000/hello to see the new page.

Dynamic Routes

• Create a directory for dynamic routes (e.g., /cars).
• Add index.js for listing and [param].js for dynamic components.
• Use useRouter hook to access URL parameters.

API Routes

• Located in the api directory.
• Used for server-side routes, helpful to reduce client-side JavaScript bundle size.

Data Fetching and Rendering

Server Rendering Benefits

• Quicker rendered content for users.
• Content can be crawled by search engines and social media bots.

Implementing Static Generation

• Fetch data using getStaticProps inside component files.
• Use the params argument to access URL data during data fetching.
• Return fetched data as props to the component.

Adding SEO

• Use the Head component to include SEO-friendly titles and meta tags.

Implementing Dynamic Route Static Generation

1. Use getStaticPaths to return available paths for dynamic routes.
2. Fetch data for each route during build time.

Summary of Server-Side Rendering

• Generates content on the server upon user requests.
• Ensures up-to-date data delivery.
• Use getServerSideProps to implement SSR.

Conclusion

• Next.js allows flexible use of static generation and server-side rendering.
• Great for projects needing fast performance and SEO optimization.

---

• Subscribe for more videos.
• Full React Next Firebase course coming soon for Fireship Pro members.