Next.js: Create Fast, SEO-Optimized React Apps

Overview

• Next.js helps build React apps with server-side rendering for optimized performance and SEO.
• Traditional React apps are rendered client-side, which has drawbacks:
  • Content might not be indexed by search engines/social media bots.
  • Longer time to first contentful paint (FCP).
• Next.js renders content server-side first, then switches to client-side rendering.

Key Features

Pages Directory

• Contains JavaScript files exporting React components representing routes.
• File structure mirrors actual URLs for seamless navigation.
• Next.js provides its own router.

Data Fetching Strategies

1. Static Generation (Pre-Rendering):
   • Render pages at build time using getStaticProps.
   • Suitable for data that doesn't change often.
   • Pages can be cached by a CDN.
2. Server-Side Rendering (SSR):
   • Pages are rendered on each request using getServerSideProps.
   • Ensures data is always up-to-date.
   • Suitable for dynamic data.
3. Incremental Static Regeneration (ISR):
   • Combines static generation with revalidation using getStaticProps with revalidate.
   • Regenerates pages based on a defined interval.

Setting Up a Next.js Project

• Use npx create-next-app <app-name> to generate a project.
• Run the project in development mode with npm run dev on localhost:3000.

Styles in Next.js

• Supports CSS modules for scoped styling.
• Define global styles in styles/globals.css.
• Import styles in JavaScript files and use them as JavaScript objects.

Creating Pages and Routes

• Define main entry point in pages/_app.js.
• Create a new route by creating a new file in the pages directory and exporting a default React component.
• For dynamic routes, use brackets in the filename (e.g., [param].js).

Example Routes

• Static Route: Create pages/hello.js and export a component.
• Dynamic Route:
  • Create pages/cars/index.js for a list of cars.
  • Create pages/cars/[id].js for dynamic car pages. Fetch parameters using useRouter from next/router.

API Routes

• Define server-side routes in the api directory.
• Reduces client-side JavaScript bundle size.

Data Fetching Examples

Static Generation

• Fetch data at build time with getStaticProps.
• Use getStaticPaths to define dynamic routes.
• Example: Fetch car data from JSON files placed in public directory.

Server-Side Rendering

• Fetch data on each request with getServerSideProps.
• Appropriate for frequently changing data.
• Copy getStaticProps logic to getServerSideProps in dynamic component files.

SEO Considerations

• Add SEO-friendly titles and meta tags using the Head component from Next.js.

Conclusion

• Next.js balances server-side and client-side rendering for better performance and SEO.
• Flexible data fetching strategies allow for optimized and dynamic data handling as needed.
• Full Next.js course in development, to be completed by end of January.

Commands and Tips

• Initialize project: npx create-next-app <app-name>.
• Start development server: npm run dev.
• Create new routes by adding components in pages.
• Use getStaticProps, getServerSideProps, and getStaticPaths for data fetching based on needs.

---