> For the complete documentation index, see [llms.txt](https://www.mohitkapadiya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.mohitkapadiya.com/frontend/nextjs.md).

# NextJS

**Overview:** Next.js is a powerful React framework that enables server-side rendering, static site generation, and dynamic routing, enhancing performance and SEO capabilities. Here’s an in-depth look at my skills and experience with Next.js

**Key Features and Skills**

* **Server-Side Rendering (SSR):** Utilized SSR to pre-render pages on the server, improving initial load times and SEO.

```jsx
import React from 'react';

const HomePage = ({ data }) => (
  <div>
    <h1>Welcome to Next.js!</h1>
    <p>{data.message}</p>
  </div>
);

export async function getServerSideProps() {
  // Fetch data from an API or database
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default HomePage;
```

* **Static Site Generation (SSG):** Used SSG to generate static pages at build time, which improves page load performance and reduces server load.

```jsx
import React from 'react';

const Post = ({ post }) => (
  <div>
    <h1>{post.title}</h1>
    <p>{post.content}</p>
  </div>
);

export async function getStaticPaths() {
  // Fetch paths from an API or database
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // Fetch data for a specific post
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

export default Post;
```

* **Dynamic Routing:** Implemented dynamic routing for creating dynamic pages based on URL parameters.

```jsx
import React from 'react';

const ProductPage = ({ product }) => (
  <div>
    <h1>{product.name}</h1>
    <p>{product.description}</p>
  </div>
);

export async function getStaticPaths() {
  // Fetch product IDs
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  const paths = products.map(product => ({
    params: { id: product.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // Fetch product details
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return {
    props: { product },
  };
}

export default ProductPage;
```

* **API Routes:** Created API routes within the Next.js application to handle server-side logic and data fetching.

```jsx
import Image from 'next/image';

const Avatar = ({ src, alt }) => (
  <div>
    <Image src={src} alt={alt} width={100} height={100} />
  </div>
);

export default Avatar;
```

* **Internationalization (i18n):** Implemented internationalization to support multiple languages in the application.

```jsx
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
};
```

* **CSS Modules and Styled Components:** Used CSS Modules and Styled Components for modular and scoped styling.

```jsx
// Example: styles/Home.module.css
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

// Example: pages/index.js
import styles from '../styles/Home.module.css';

const HomePage = () => (
  <div className={styles.container}>
    <h1>Hello, Next.js!</h1>
  </div>
);

export default HomePage;
```

**Tools and Libraries**

* **Vercel:** Deployed Next.js applications with seamless integration and automatic optimizations.
* **Tailwind CSS:** Utilized Tailwind CSS for utility-first styling and rapid UI development.
* **TypeScript:** Integrated TypeScript for type safety and improved developer experience.
* **Redux / Zustand:** Managed global state effectively using Redux or Zustand for scalable state management.
* **Jest / React Testing Library:** Employed Jest and React Testing Library for unit and integration testing.