Merge pull request #3637 from CodeHarborHub/restyled/dev-3

Restyle added ads on ebook section

Author: ajay-dhangar

courses/Next.Js/beginner-level/Introduction/Frameworks.md

@@ -4,63 +4,62 @@ title: "Comparing Next.js with Other Frameworks"
 sidebar_label: Next.js with Frameworks
 sidebar_position: 2
 description: "Comparing Next.js with Other Frameworks"
-tags: [courses,beginner-level,FramWorks,Introduction]
---- 
- 
-## Comparing Next.js with Other Frameworks
+tags: [courses, beginner-level, FramWorks, Introduction]
+---
 
+## Comparing Next.js with Other Frameworks
 
 ### 1. Next.js vs. React
 
-   - **React**: A library for building user interfaces. It focuses on the view layer and requires additional libraries and tools for routing, state management, and server-side rendering.
-   - **Next.js**: A framework built on top of React that provides out-of-the-box features like SSR, SSG, and file-based routing. It simplifies the setup and development process for React applications.
+- **React**: A library for building user interfaces. It focuses on the view layer and requires additional libraries and tools for routing, state management, and server-side rendering.
+- **Next.js**: A framework built on top of React that provides out-of-the-box features like SSR, SSG, and file-based routing. It simplifies the setup and development process for React applications.
 
 ### 2. Next.js vs. Angular
 
-   - **Angular**: A full-fledged framework developed by Google that includes a complete set of tools for building single-page applications. It uses TypeScript by default and has a more opinionated structure.
-   - **Next.js**: Focuses on server-side rendering and static site generation for React applications. It is less opinionated than Angular and provides more flexibility in terms of tools and libraries.
+- **Angular**: A full-fledged framework developed by Google that includes a complete set of tools for building single-page applications. It uses TypeScript by default and has a more opinionated structure.
+- **Next.js**: Focuses on server-side rendering and static site generation for React applications. It is less opinionated than Angular and provides more flexibility in terms of tools and libraries.
 
 ### 3. Next.js vs. Vue
 
-   - **Vue**: A progressive framework for building user interfaces, similar to React in terms of component-based architecture.
-   - **Nuxt.js**: A framework built on top of Vue that provides similar features to Next.js, including SSR and SSG.
-   - **Next.js**: The React counterpart to Nuxt.js, providing SSR, SSG, and additional optimizations for React applications.
+- **Vue**: A progressive framework for building user interfaces, similar to React in terms of component-based architecture.
+- **Nuxt.js**: A framework built on top of Vue that provides similar features to Next.js, including SSR and SSG.
+- **Next.js**: The React counterpart to Nuxt.js, providing SSR, SSG, and additional optimizations for React applications.
 
 ### 4. Next.js vs. Gatsby
 
-   - **Gatsby**: A static site generator that uses React to build websites. It focuses on performance, SEO, and developer experience.
-   - **Next.js**: Offers similar features to Gatsby, such as SSR and SSG, but with more flexibility and control over the development process. It is more suitable for applications that require server-side logic and dynamic data fetching.
+- **Gatsby**: A static site generator that uses React to build websites. It focuses on performance, SEO, and developer experience.
+- **Next.js**: Offers similar features to Gatsby, such as SSR and SSG, but with more flexibility and control over the development process. It is more suitable for applications that require server-side logic and dynamic data fetching.
 
 ### 5. Next.js vs. SvelteKit
 
-   - **SvelteKit**: A framework for building web applications using the Svelte framework. It focuses on simplicity, performance, and developer experience.
-   - **Next.js**: Offers similar features to SvelteKit, such as SSR and SSG, but with a React-based approach. It provides a rich ecosystem of tools and libraries for building modern web applications.
+- **SvelteKit**: A framework for building web applications using the Svelte framework. It focuses on simplicity, performance, and developer experience.
+- **Next.js**: Offers similar features to SvelteKit, such as SSR and SSG, but with a React-based approach. It provides a rich ecosystem of tools and libraries for building modern web applications.
 
 ### 6. Next.js vs. Express (Node.js)
 
-   - **Express**: A minimalist web framework for Node.js that focuses on building server-side applications and APIs.
-   - **Next.js**: A framework for building React applications with server-side rendering and static site generation. It provides additional features like automatic code splitting, API routes, and optimized performance.
+- **Express**: A minimalist web framework for Node.js that focuses on building server-side applications and APIs.
+- **Next.js**: A framework for building React applications with server-side rendering and static site generation. It provides additional features like automatic code splitting, API routes, and optimized performance.
 
 ### 7. Next.js vs. Nuxt.js
 
-   - **Nuxt.js**: A framework for building Vue applications with server-side rendering and static site generation.
-   - **Next.js**: The React counterpart to Nuxt.js, providing similar features like SSR, SSG, and a rich ecosystem of tools and libraries for building modern web applications.
+- **Nuxt.js**: A framework for building Vue applications with server-side rendering and static site generation.
+- **Next.js**: The React counterpart to Nuxt.js, providing similar features like SSR, SSG, and a rich ecosystem of tools and libraries for building modern web applications.
 
 ### 8. Next.js vs. Create React App (CRA)
 
-   - **Create React App**: A tool for setting up React applications with a predefined configuration and build process.
-   - **Next.js**: A framework that extends React with features like SSR, SSG, and API routes. It provides a more structured approach to building React applications with additional optimizations for performance and developer experience.
+- **Create React App**: A tool for setting up React applications with a predefined configuration and build process.
+- **Next.js**: A framework that extends React with features like SSR, SSG, and API routes. It provides a more structured approach to building React applications with additional optimizations for performance and developer experience.
 
 ### 9. Next.js vs. Blitz.js
 
-   - **Blitz.js**: A full-stack framework for building web applications with React and Prisma. It focuses on developer productivity and seamless integration of backend and frontend logic.
-   - **Next.js**: Offers similar features to Blitz.js, such as SSR and SSG, but with a more flexible approach to building applications. It provides a broader range of tools and libraries for customizing and optimizing React applications.
+- **Blitz.js**: A full-stack framework for building web applications with React and Prisma. It focuses on developer productivity and seamless integration of backend and frontend logic.
+- **Next.js**: Offers similar features to Blitz.js, such as SSR and SSG, but with a more flexible approach to building applications. It provides a broader range of tools and libraries for customizing and optimizing React applications.
 
 ### 10. Next.js vs. Sapper
 
-   - **Sapper**: A framework for building web applications with Svelte that includes features like server-side rendering and routing.
-   - **Next.js**: Offers similar features to Sapper, such as SSR and SSG, but with a React-based approach. It provides a more extensive set of tools and optimizations for building React applications.
+- **Sapper**: A framework for building web applications with Svelte that includes features like server-side rendering and routing.
+- **Next.js**: Offers similar features to Sapper, such as SSR and SSG, but with a React-based approach. It provides a more extensive set of tools and optimizations for building React applications.
 
 ### Conclusion
 
-Next.js is a powerful framework for building React applications with server-side rendering, static site generation, and a rich ecosystem of tools and libraries. While there are other frameworks available for building web applications, Next.js stands out for its performance, developer experience, and flexibility in handling various use cases. Whether you are building a simple website, a full-fledged web application, or a complex enterprise solution, Next.js provides the features and optimizations needed to deliver high-quality applications efficiently.
+Next.js is a powerful framework for building React applications with server-side rendering, static site generation, and a rich ecosystem of tools and libraries. While there are other frameworks available for building web applications, Next.js stands out for its performance, developer experience, and flexibility in handling various use cases. Whether you are building a simple website, a full-fledged web application, or a complex enterprise solution, Next.js provides the features and optimizations needed to deliver high-quality applications efficiently.

courses/Next.Js/beginner-level/Introduction/introduction.md

@@ -4,9 +4,8 @@ title: Introduction to Next.js
 sidebar_label: Introduction
 sidebar_position: 1
 description: Introduction to Next.js
-tags: [courses,beginner-level,FramWorks,Introduction]
---- 
-  
+tags: [courses, beginner-level, FramWorks, Introduction]
+---
 
 ## What is Next.js?
 
@@ -29,7 +28,7 @@ Next.js offers several key features that make it a popular choice for building R
 6. **Built-in CSS and Sass Support**: Next.js has built-in support for importing CSS and Sass files, making it easy to style your applications.
 
 7. **Developer Experience**: Features like fast refresh, which provides instantaneous feedback on edits without losing component state, make the development process more efficient and enjoyable.
-:::
+   :::
 
 ## Why Learn Next.js?
 
@@ -65,4 +64,4 @@ By learning Next.js, developers can leverage these features and benefits to crea
 
 ## Conclusion
 
-Next.js is a powerful React framework that offers server-side rendering, static site generation, and a range of features to enhance the development process and application performance. By learning Next.js, developers can build fast, scalable, and SEO-friendly web applications with a seamless developer experience. Whether you are new to web development or looking to enhance your existing skills, Next.js provides a valuable toolkit for creating modern web applications that deliver exceptional user experiences.
+Next.js is a powerful React framework that offers server-side rendering, static site generation, and a range of features to enhance the development process and application performance. By learning Next.js, developers can build fast, scalable, and SEO-friendly web applications with a seamless developer experience. Whether you are new to web development or looking to enhance your existing skills, Next.js provides a valuable toolkit for creating modern web applications that deliver exceptional user experiences.

courses/Next.Js/beginner-level/Introduction/settingUp.md

@@ -4,15 +4,17 @@ title: "Setting Up the Development Environment"
 sidebar_label: Setup
 sidebar_position: 3
 description: "Setting Up the Development Environment"
-tags: [courses,beginner-level,FramWorks,Introduction]
---- 
-   
+tags: [courses, beginner-level, FramWorks, Introduction]
+---
+
 To get started with Next.js, you'll need Node.js and npm (or yarn) installed on your system. Follow these steps to set up a Next.js development environment:
 
 1. **Install Node.js**:
+
    - Download and install Node.js from [nodejs.org](https://nodejs.org/).
 
 2. **Create a New Next.js Application**:
+
    - Open your terminal and run the following command to create a new Next.js project:
      ```bash
      npx create-next-app@latest my-next-app
@@ -21,12 +23,14 @@ To get started with Next.js, you'll need Node.js and npm (or yarn) installed on
      ```
 
 3. **Navigate to the Project Directory**:
+
    - Change to the project directory:
      ```bash
      cd my-next-app
      ```
 
 4. **Start the Development Server**:
+
    - Run the development server:
      ```bash
      npm run dev
@@ -58,4 +62,4 @@ By following these steps, you can set up a development environment for building
 
 ## Additional Resources:
 
-- [Next.js Documentation](https://nextjs.org/docs)
+- [Next.js Documentation](https://nextjs.org/docs)

courses/Next.Js/beginner-level/static-and-serverSide/concept.md

@@ -4,21 +4,24 @@ title: "Concepts of static and server-side rendering"
 sidebar_label: Concepts
 sidebar_position: 2
 description: "Concepts of static and server-side rendering"
-tags: [courses,beginner-level,FramWorks,Introduction]
+tags: [courses, beginner-level, FramWorks, Introduction]
 ---
- 
+
 #### Implementing Static Generation (`getStaticProps`)
 
 `getStaticProps` is a Next.js function that allows you to fetch data at build time to pre-render a page.
 
 1. **Creating a Page with `getStaticProps`**:
+
    ```javascript
    // src/pages/posts/[id].js
-   import { useRouter } from 'next/router';
+   import { useRouter } from "next/router";
 
    export async function getStaticProps({ params }) {
      // Fetch data for the post using the id from params
-     const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
+     const res = await fetch(
+       `https://jsonplaceholder.typicode.com/posts/${params.id}`,
+     );
      const post = await res.json();
 
      return {
@@ -30,10 +33,10 @@ tags: [courses,beginner-level,FramWorks,Introduction]
 
    export async function getStaticPaths() {
      // Specify dynamic routes to pre-render based on data
-     const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+     const res = await fetch("https://jsonplaceholder.typicode.com/posts");
      const posts = await res.json();
 
-     const paths = posts.map(post => ({
+     const paths = posts.map((post) => ({
        params: { id: post.id.toString() },
      }));
 
@@ -68,11 +71,12 @@ tags: [courses,beginner-level,FramWorks,Introduction]
 `getServerSideProps` is a Next.js function that allows you to fetch data on each request to pre-render a page.
 
 1. **Creating a Page with `getServerSideProps`**:
+
    ```javascript
    // src/pages/profile.js
    export async function getServerSideProps(context) {
      // Fetch data on each request
-     const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
+     const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
      const profile = await res.json();
 
      return {
@@ -101,10 +105,13 @@ tags: [courses,beginner-level,FramWorks,Introduction]
 ISR allows you to update static pages after they have been built, without requiring a full rebuild of the site.
 
 1. **Implementing ISR with `revalidate`**:
+
    ```javascript
    // src/pages/posts/[id].js
    export async function getStaticProps({ params }) {
-     const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
+     const res = await fetch(
+       `https://jsonplaceholder.typicode.com/posts/${params.id}`,
+     );
      const post = await res.json();
 
      return {
@@ -116,10 +123,10 @@ ISR allows you to update static pages after they have been built, without requir
    }
 
    export async function getStaticPaths() {
-     const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+     const res = await fetch("https://jsonplaceholder.typicode.com/posts");
      const posts = await res.json();
 
-     const paths = posts.map(post => ({
+     const paths = posts.map((post) => ({
        params: { id: post.id.toString() },
      }));
 
@@ -150,4 +157,4 @@ ISR allows you to update static pages after they have been built, without requir
 
 #### Conclusion
 
-Next.js provides various methods for rendering pages, including static generation, server-side rendering, and incremental static regeneration. These features allow you to optimize performance and user experience by fetching data at build time or on each request.
+Next.js provides various methods for rendering pages, including static generation, server-side rendering, and incremental static regeneration. These features allow you to optimize performance and user experience by fetching data at build time or on each request.