Next.js: Create Fast Search Engine Optimized React Apps with Zero Configuration

Client-Side Rendering (CSR)

• Traditional React apps render client-side.
• The browser starts with a shell of an HTML page.
• JS file containing React code is fetched to render content.
• **Drawbacks: **
  • Not reliably indexed by all search engines or read by social media link bots.
  • Longer time to reach the first contentful paint.

Next.js Overview

• A framework to build React apps but render content server-side.
• Benefits:
  • Fully rendered HTML seen first by users/search bots.
  • Best of both worlds—rendered content for bots and interactive content for users.

Project Structure

• pages directory:
  • Each JS file here exports a React component representing a route.
  • File structure mirrors actual URLs user navigates to.
  • Next provides its own router for seamless navigation.

Data Fetching Strategies

• Static Generation (Pre-rendering):
  • Render pages at build time.
  • Uses getStaticProps to fetch data and render HTML.
  • Ideal for data that doesn't change often.
  • Example usage: Blogs.
• Server-Side Rendering (SSR):
  • Builds HTML page on user request.
  • Uses getServerSideProps to fetch latest data at request time.
  • Ideal for rapidly changing data.
  • Example usage: Auction sites like eBay.
• Incremental Static Regeneration (ISR):
  • Combination of static generation and SSR.
  • Uses revalidate option in getStaticProps to regenerate page within a time interval.

Running a Next.js Project

1. Setup:
   • Run npx create-next-app <app-name> to create a new project.
   • Open project in VS Code.
   • Use npm run dev to start the dev server on localhost:3000.
2. Styles:
   • Supports CSS modules.
   • Define global styles and module-specific styles.
   • Import styles as JS objects.
3. Pages Directory:
   • Defines pages and routes.
   • _app.js is the main entry point.
   • Each page must have a default export React component.

Creating Routes and Dynamic Routes

• Create files in pages directory for each route.
• For dynamic routes, use bracket notation (e.g., [param].js).
• Use useRouter hook to access query parameters from the URL.

API Routes

• Special api directory for server-side routes.
• Does not increase client-side JS bundle.
• Useful for back-end work or exposing APIs.

Implementing Static Generation

1. Fetching Data:
   • Use getStaticProps to fetch data from APIs or databases.
   • Return props to be used by components.
2. SEO Optimization:
   • Use Head component to add titles and meta tags for SEO.
3. Dynamic Routes:
   • Use getStaticPaths to provide all available paths for dynamic routes.

Server-Side Rendering (SSR)

• Implemented using getServerSideProps function.
• Fetches latest data on every request.
• Suitable for frequently changing data.

Conclusion

• Next.js combines the best features of CSR and SSR.
• Flexibility in choosing static generation or SSR based on use case.
• Recommended tools for full-scale React and Next.js development.