
## Project Overview
In this project, we’ll build a dynamic blog application with the following features:

- Dynamic routes for blog posts.

- Real-time fetching of blog content from a mock API.

- SEO-optimized pages using Next.js 14 metadata tools.

- Responsive design with CSS modules.

By the end of this tutorial, you will have a deployable blog application.

## Setting Up the Environment

1. Install Node.js
Ensure you have Node.js version 18 or higher installed on your system.


2. Initialize the Project
Run the following command to set up a new Next.js project:
```bash
npx create-next-app@latest blog-app
cd blog-app
```


3. Start the Development Server
Launch the server to view the app:
```bash
npm run dev
```
Open your browser and navigate to 

<p className="bg-yellow-200 px-3 py-2 rounded-lg">
http://localhost:3000.
</p>


## Creating a Dynamic Blog App

1. Setting Up the Blog Structure

Create a folder for the blog pages under the app directory:
```bash
mkdir -p app/blog/[slug]
```
2. Dynamic Routing with App Router

Create a dynamic route for blog posts:
```jsx
// app/blog/[slug]/page.js
import { use } from 'react';

async function fetchPost(slug) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${slug}`);
  if (!res.ok) throw new Error('Post not found');
  return res.json();
}

export default function BlogPost({ params }) {
  const post = use(fetchPost(params.slug));

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}
```
Key Concepts:

Dynamic Routing: [slug] allows the app to handle different URLs dynamically.

Server-Side Rendering: use(fetchPost) fetches data on the server for better SEO.


3. Fetching Blog Posts

To display a list of blog posts, create an index page:
```jsx
// app/blog/page.js
import Link from 'next/link';

async function fetchPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

export default async function Blog() {
  const posts = await fetchPosts();

  return (
    <section>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </section>
  );
}
```
4. Styling the Application

Add styles using CSS Modules:
```css
/* styles/blog.module.css */
.container {
  font-family: Arial, sans-serif;
  margin: 0 auto;
  max-width: 800px;
  padding: 1rem;
}

h1 {
  color: #333;
}
```

Import the styles in your components:
```jsx
import styles from './styles/blog.module.css';

export default function Blog() {
  // Use `styles.container` for styling
}
```

## Adding SEO Optimization

Use the Metadata API to add SEO tags to the blog:

```js
export const metadata = {
  title: 'Dynamic Blog App | Next.js 14',
  description: 'A fully functional blog app built with Next.js 14.',
};
```
For individual blog posts, generate dynamic metadata:
```js
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug);
  return {
    title: `${post.title} | Blog`,
    description: post.body.substring(0, 150),
  };
}
```
## Deploying the Application

1. Install Vercel CLI:
```bash
npm install -g vercel
```

2. Deploy the App:
Run the following command and follow the prompts:
```bash
vercel
```

3. Live URL: Your app will be live at a unique URL provided by Vercel.




In this tutorial, we’ll build a fully functional  blog application using Next.js 14, leveraging its newest features for dynamic routing, SEO, and performance optimization. This project is designed to help you learn practical Next.js 14 concepts step-by-step. 

Documentation Officielle Next Js

How Do I Create Web App Using Next Js ?

Blogging App Using Next Js For A Full-Stack Application

JSONPlaceholder API (Mock Data)

Vercel Deployment Guide

Build a Blog Application with Next.js 14: A Step-by-Step Tutorial 


```jsx
   // pages/search.js
import { useState, useEffect } from "react";
import Fuse from "fuse.js";
import { useRouter } from "next/router";
import fs from "fs";
import path from "path";
import Layout from "@/components/Layout";
import { format } from "date-fns";
import Link from "next/link";
export default function SearchResultsPage({ blogs }) {
  const [filteredBlogs, setFilteredBlogs] = useState([]);
  const [loading, setLoading] = useState(true);
  const { query } = useRouter();

  useEffect(() => {
    if (query.query) {
      setLoading(true);
      const fuse = new Fuse(blogs, {
        keys: ["title", "description", "tags", "category"],
        includeScore: true,
        threshold: 0.4,
      });
      const results = fuse.search(query.query);
      setFilteredBlogs(results.map((r) => r.item));
      setLoading(false);
    }
  }, [query.query, blogs]);

  return (
    <Layout>

    <div className="max-w-4xl mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold mb-4">Search Results</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div className="grid lg:grid-cols-2 gap-4">
          {filteredBlogs.length > 0 ? (
            filteredBlogs.map((blog, index) => (
              <Link key={blog.id} href={`/blog/${blog.title.replace(/\s+/g, '-').toLowerCase()}`}>

              <div key={index} className="my-3 py-2 border-b border-gray-200">
                <h2 className="text-xl underline font-semibold">{blog.title}</h2>
                <p className="my-3">{blog.description}</p>

                <div className="flex gap-2 items-center justify-between">
                <p className="flex items-center gap-2">

                <img src={blog.authorImage} width="24" className="rounded-full ring-2  object-cover"/>
                <span className="dark:text-gray-50 text-gray-700">{blog.author}</span>
                </p>
                <div className="text-gray-600 mb-1 dark:text-gray-300 text-sm">
                {format(new Date(blog.date), 'MMMM dd, yyyy')}</div>

                <div className="text-sm text-blue-500 mb-1 hidden sm:block">{blog.category}</div>

              </div>              </div></Link>
            ))
          ) : (
            <p>No results found.</p>
          )}
        </div>
      )}
    </div>
    </Layout>
  );
}

// Fetch blogs data at build time from blogs.json
export async function getStaticProps() {
  const filePath = path.join(process.cwd(), "markdown", "blogs.json");
  const jsonData = fs.readFileSync(filePath, "utf-8");
  const blogs = JSON.parse(jsonData);

  return {
    props: {
      blogs,
    },
  };
}
```

---
## data/categories.js 

Quelle sont les manieres le plus directe pour remplacer dans un fichier ce qui le rend facile a faire

```jsx
export const categories = [
    {
      id: 1,
      name: 'Well-being',
      description: 'Tips and tricks to improve your wellness.',
      slug: 'well-being',
      icon: '/icons/wellbeing-icon.png',
    },
    {
      id: 2,
      name: 'Life',
      description: 'Articles about life balance and lifestyle.',
      slug: 'life',
      icon: '/icons/life-icon.png',
    },
    {
      id: 3,
      name: 'Marketing',
      description: 'Find peace in everyday life.',
      slug: 'marketing',
      icon: '/icons/peaceful-life-icon.png',
    },
    {
      id: 4,
      name: 'English ',
      description: 'Where you will find best english course.',
      slug: 'english',
      icon: '/icons/peaceful-life-icon.png',
    },
  ];
  ```

About that question , we're down the hall to give some response, How Does Apple Make Their Product Design So Wondrous 

Learning Mandarin for Engineers

Docker Installation Guide

How Does Apple Make Their Product Design So Wondrous


Pour connaitre les avantages que nous donnons veuiller le faire
```js
./styles/globals.css
./pages/_app.js
 ✓ Compiled in 1540ms (610 modules)
 ✓ Compiled in 1343ms (613 modules)
 GET /_next/data/development/blog/this-will-let-you-be-what-you're-suppose-to.json?slug=this-will-let-you-be-what-you%27re-suppose-to 200 in 240ms
 ✓ Compiled in 1210ms (611 modules)
 GET /_next/data/development/index.json 200 in 302ms
 ○ Compiling /_error ...
 ✓ Compiled /_error in 980ms (613 modules)
 GET /icons/wellbeing-icon.png 404 in 1125ms
 GET /icons/life-icon.png 404 in 1121ms
 GET /icons/peaceful-life-icon.png 404 in 1118ms
 GET /_next/data/development/blog/6.json?slug=6 404 in 76ms
 GET /_next/data/development/blog/6.json?slug=6 404 in 16ms
 GET /blog/6 404 in 26ms
 GET /blog/6 404 in 12ms
 GET / 200 in 63ms
 GET /icons/wellbeing-icon.png 404 in 44ms
 GET /icons/life-icon.png 404 in 35ms
 GET /icons/peaceful-life-icon.png 404 in 32ms
 ○ Compiling /blog ...
 ✓ Compiled /blog in 1625ms (1000 modules)
 GET /_next/data/development/blog.json 200 in 229ms
 GET /_next/data/development/blog/installation-et-configuration-de-docker-sur-linux-(-ubuntu-).json?slug=installation-et-configuration-de-docker-sur-linux-%28-ubuntu-%29 200 in 180ms
 GET /_next/data/development/blog.json 200 in 96ms
 GET /_next/data/development/blog/this-will-let-you-be-what-you're-suppose-to.json?slug=this-will-let-you-be-what-you%27re-suppose-to 200 in 50ms

These computer have been built to stand out at any level and go for as much 

Optimised To Do 24 7 Jobs And More

## Introduction to Next.js 14

Next.js, the React-based framework by Vercel, continues to innovate with the release of version 14. It empowers developers to create fast, scalable, and feature-rich applications while simplifying complex workflows.

## What's New in Next.js 14?

### Improved App Router

Next.js 14 enhances the App Router, enabling seamless server and client components with improved hydration and streaming capabilities. These improvements significantly reduce Time to Interactive (TTI).

### Enhanced Performance

Performance optimization remains a priority, with features like automatic prefetching and optimized bundle splitting. The integration of Turbopack as the default bundler further boosts build speed.

### AI-Powered Features

Next.js 14 introduces AI-based tools like AI Routing Assistance, allowing applications to adapt routing dynamically based on user behavior.

## Setting Up a Next.js 14 Project

Follow these steps to create a new Next.js 14 project:

1. Install Node.js
Ensure you have Node.js 18 or higher installed.


2. Initialize a New Project

npx create-next-app@latest my-next-app
```bash
cd my-next-app
```

3. Start the Development Server
```bash
npm run dev
```
Your development server should now be running at http://localhost:3000.

Code Example: Building a Dynamic Web Page

Here's a simple example of building a dynamic blog page using the new App Router:

```jsx
// app/blog/[slug]/page.js
import { use } from 'react';

async function fetchPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  if (!res.ok) throw new Error('Post not found');
  return res.json();
}

export default function BlogPost({ params }) {
  const post = use(fetchPost(params.slug));

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}
```
Key Highlights:

Dynamic Routing: [slug] allows dynamic URL handling.

Async Data Fetching: use(fetchPost) simplifies fetching and rendering.



---

## SEO Best Practices in Next.js 14

1. Optimize Metadata
Use the new <Metadata> component in the App Router to set SEO metadata:

export const metadata = {
  title: 'Next.js 14 Blog',
  description: 'Learn all about Next.js 14 with code examples and resources.',
};


2. Server-Side Rendering (SSR)
Leverage SSR for better search engine indexing:

```jsx
export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/data');
  return { props: { data } };
}
```

3. Image Optimization
Utilize the <Image> component for responsive and lazy-loaded images.


4. Sitemap Generation
Automate sitemap generation using tools like next-sitemap.




---

## Additional Resources

1. Official Next.js 14 Documentation


2. Next.js GitHub Repository


3. Vercel's Blog on Next.js 14 Features


4. Introduction to Turbopack


---

## Conclusion

Next.js 14 elevates web development with its innovative features and seamless developer experience. Whether you're a beginner or a seasoned developer, this release has tools to make your applications faster, smarter, and more efficient.

Happy coding!

---

SEO Tip: Ensure this blog includes relevant keywords such as "Next.js 14," "React framework," "modern web development," and "Next.js tutorial."

Next.js 14 is a significant milestone for modern web development. In this blog, we'll explore its key features, walk through code examples, and provide resources to help you get started.

Next.js 14: A Comprehensive Guide with Code Examples 

4. Code Example: Building a Dynamic Web Page

technology Blogs