NextJS

Here’s a detailed breakdown of my Next.js skills, including features, tools, and code snippets to highlight how I have used Next.js to build effective front-end applications.

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.

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.

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.

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.

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.

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

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

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