# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.mohitkapadiya.com/frontend/nextjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.