- );
- }
- ```
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/SWR.md b/courses/Next.Js/Intermediate-level/Data-Fetching/SWR.md
deleted file mode 100644
index e1daeacb4..000000000
--- a/courses/Next.Js/Intermediate-level/Data-Fetching/SWR.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: lesson-2
-title: "SWR (Stale-While-Revalidate) for Data Fetching and Caching"
-sidebar_label: SWR (Stale-While-Revalidate)
-sidebar_position: 2
-description: "SWR (Stale-While-Revalidate) for Data Fetching and Caching"
-tags: [courses,intermediate-level,FramWorks,Introduction]
----
-
-
-
-SWR is a React Hooks library for data fetching, providing features like caching, revalidation, focus tracking, and more.
-
-1. **Install SWR**:
- ```bash
- npm install swr
- ```
-
-2. **Using SWR**:
- ```javascript
- // src/pages/index.js
- import useSWR from 'swr';
-
- const fetcher = url => fetch(url).then(res => res.json());
-
- export default function Home() {
- const { data: posts, error } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);
-
- if (error) return
Failed to load
;
- if (!posts) return
Loading...
;
-
- return (
-
-
Posts
-
- {posts.map(post => (
-
{post.title}
- ))}
-
-
- );
- }
- ```
-
-**Key Features of SWR**:
-- **Stale-While-Revalidate**: Data is returned from the cache first (stale), then fetches the latest data in the background (revalidate).
-- **Automatic Revalidation**: Data is revalidated on focus, network reconnect, and interval-based revalidation.
-- **Error Handling**: Provides built-in error handling and state management.
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/_category_.json b/courses/Next.Js/Intermediate-level/Data-Fetching/_category_.json
deleted file mode 100644
index 23e48253e..000000000
--- a/courses/Next.Js/Intermediate-level/Data-Fetching/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Data Fetching",
- "position": 1,
- "link": {
- "type": "generated-index",
- "description": "Learn Next.Js Data Fetching."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md b/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
deleted file mode 100644
index 82936046a..000000000
--- a/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-id: lesson-1
-title: "Data Fetching and Caching in Next.js"
-sidebar_label: Data Fetching and Caching
-sidebar_position: 1
-description: "Data Fetching and Caching in Next.js"
-tags: [courses,intermediate-level,FramWorks,Introduction]
----
-
-
-Efficient data fetching and caching are crucial for building performant and responsive web applications. Next.js provides several methods for fetching data, including the use of the SWR (Stale-While-Revalidate) library for caching. Additionally, Next.js supports fetching data from GraphQL APIs.
-
-#### Fetching Data from APIs
-
-Next.js allows you to fetch data in different ways depending on your requirements. The primary methods are:
-
-1. **`getStaticProps`**: Fetch data at build time for static generation.
-2. **`getServerSideProps`**: Fetch data on each request for server-side rendering.
-3. **Client-Side Fetching**: Fetch data on the client side, typically using `useEffect`.
-
-**Example with `getStaticProps`**:
-```javascript
-// src/pages/index.js
-export async function getStaticProps() {
- const res = await fetch('https://jsonplaceholder.typicode.com/posts');
- const posts = await res.json();
-
- return {
- props: {
- posts,
- },
- };
-}
-
-export default function Home({ posts }) {
- return (
-
- );
- }
- ```
-
-4. **Using SWR for Client-side Caching**:
- - `SWR` (Stale-While-Revalidate) is a React Hooks library for data fetching that provides caching and revalidation.
- ```javascript
- import useSWR from 'swr';
-
- const fetcher = (url) => fetch(url).then((res) => res.json());
-
- export default function DataComponent() {
- const { data, error } = useSWR('/api/data', fetcher);
-
- if (error) return
Failed to load
;
- if (!data) return
Loading...
;
-
- return
Data: {JSON.stringify(data)}
;
- }
- ```
-
\ No newline at end of file
diff --git a/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md b/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
deleted file mode 100644
index 65e5341c7..000000000
--- a/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-id: lesson-1
-title: "Advanced Data Fetching in Next.js"
-sidebar_label: Advanced Data Fetching in Next.js
-sidebar_position: 1
-description: "Advanced Data Fetching in Next.js"
-tags: [courses,Advance-level,FramWorks,Introduction]
----
-
-
-
-Next.js provides powerful data fetching capabilities to optimize the performance and scalability of your application. This involves using static generation with revalidation, server-side rendering with caching strategies, combining static and dynamic data fetching, and optimizing these processes for performance.
-
-#### Static Generation with Revalidation
-
-Static generation with revalidation allows you to generate static pages at build time and update them at runtime when necessary.
-
-1. **Setting up Static Generation with Revalidation**:
- ```javascript
- // pages/index.js
- export async function getStaticProps() {
- // Fetch data
- const res = await fetch('https://api.example.com/data');
- const data = await res.json();
-
- return {
- props: {
- data,
- },
- revalidate: 10, // Revalidate every 10 seconds
- };
- }
-
- export default function Home({ data }) {
- return (
-
-
Static Generation with Revalidation
-
{JSON.stringify(data, null, 2)}
-
- );
- }
- ```
-
-#### Server-side Rendering with Caching Strategies
-
-Server-side rendering (SSR) can be optimized using caching strategies to improve performance and reduce server load.
-
-1. **Setting up Server-side Rendering with Caching**:
- ```javascript
- // pages/ssr.js
- export async function getServerSideProps(context) {
- const res = await fetch('https://api.example.com/data');
- const data = await res.json();
-
- context.res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
-
- return {
- props: {
- data,
- },
- };
- }
-
- export default function SSR({ data }) {
- return (
-
-
Server-side Rendering with Caching
-
{JSON.stringify(data, null, 2)}
-
- );
- }
- ```
-
-2. **Using Cache-Control Headers**:
- - `s-maxage=10`: Cache the response on the server for 10 seconds.
- - `stale-while-revalidate`: Serve stale content while revalidating in the background.
\ No newline at end of file
diff --git a/courses/Next.Js/advance-level/Advance-server-side-render/SSR.md b/courses/Next.Js/advance-level/Advance-server-side-render/SSR.md
deleted file mode 100644
index d6a40f93f..000000000
--- a/courses/Next.Js/advance-level/Advance-server-side-render/SSR.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-id: lesson-2
-title: "Optimizing SSR for Performance"
-sidebar_label: Optimizing SSR
-sidebar_position: 2
-description: "Optimizing SSR for Performance"
-tags: [courses,Advance-level,FramWorks,Introduction]
----
-
-
-
-1. **Caching Responses**:
- - Use caching strategies to reduce the load on the server.
- ```javascript
- // pages/index.js
- export async function getServerSideProps(context) {
- const cache = new Map();
- const cacheKey = 'data';
-
- if (cache.has(cacheKey)) {
- return {
- props: {
- data: cache.get(cacheKey),
- },
- };
- }
-
- const res = await fetch('https://api.example.com/data');
- const data = await res.json();
- cache.set(cacheKey, data);
-
- return {
- props: {
- data,
- },
- };
- }
- ```
-
-2. **Optimizing Data Fetching**:
- - Fetch only necessary data and minimize the amount of data sent to the client.
- ```javascript
- // pages/index.js
- export async function getServerSideProps(context) {
- const res = await fetch('https://api.example.com/data?fields=id,name');
- const data = await res.json();
-
- return {
- props: {
- data,
- },
- };
- }
- ```
-
-3. **Using Static Generation with Revalidation**:
- - Use static generation with incremental static regeneration (ISR) for frequently updated data.
- ```javascript
- // pages/index.js
- export async function getStaticProps() {
- const res = await fetch('https://api.example.com/data');
- const data = await res.json();
-
- return {
- props: {
- data,
- },
- revalidate: 60, // Revalidate every 60 seconds
- };
- }
-
- export default function Home({ data }) {
- return (
-
- );
- }
- ```
-
-#### Advanced GraphQL Features (Subscriptions, Caching)
-
-1. **Setting Up Subscriptions**:
- - For subscriptions, you need to set up a WebSocket server. First, install the required packages:
- ```bash
- npm install subscriptions-transport-ws @apollo/client graphql-ws
- ```
-
- - Configure your Apollo Server to support subscriptions:
- ```javascript
- // pages/api/graphql.js
- import { ApolloServer, gql } from 'apollo-server-micro';
- import { useServer } from 'graphql-ws/lib/use/ws';
- import { WebSocketServer } from 'ws';
-
- const typeDefs = gql`
- type Query {
- hello: String
- }
- type Subscription {
- time: String
- }
- `;
-
- const resolvers = {
- Query: {
- hello: () => 'Hello, world!',
- },
- Subscription: {
- time: {
- subscribe: (_, __, { pubsub }) => {
- setInterval(() => pubsub.publish('TIME', { time: new Date().toISOString() }), 1000);
- return pubsub.asyncIterator('TIME');
- },
- },
- },
- };
-
- const pubsub = new PubSub();
- const apolloServer = new ApolloServer({ typeDefs, resolvers, context: { pubsub } });
-
- export const config = {
- api: {
- bodyParser: false,
- },
- };
-
- const startServer = apolloServer.start();
-
- export default async function handler(req, res) {
- await startServer;
- await apolloServer.createHandler({ path: '/api/graphql' })(req, res);
- }
-
- // Setup WebSocket server
- const wsServer = new WebSocketServer({ port: 4000 });
- useServer({ schema: apolloServer.schema }, wsServer);
- ```
-
- - Connect to the subscription server in your client:
- ```javascript
- // lib/apolloClient.js
- import { ApolloClient, InMemoryCache, ApolloProvider, split } from '@apollo/client';
- import { WebSocketLink } from '@apollo/client/link/ws';
- import { createHttpLink } from '@apollo/client';
- import { getMainDefinition } from '@apollo/client/utilities';
-
- const httpLink = createHttpLink({
- uri: '/api/graphql',
- });
-
- const wsLink = new WebSocketLink({
- uri: 'ws://localhost:4000/graphql',
- options: {
- reconnect: true,
- },
- });
-
- const splitLink = split(
- ({ query }) => {
- const definition = getMainDefinition(query);
- return (
- definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
- );
- },
- wsLink,
- httpLink
- );
-
- const client = new ApolloClient({
- link: splitLink,
- cache: new InMemoryCache(),
- });
-
- export function ApolloProviderWrapper({ children }) {
- return {children};
- }
- ```
-
- - Use subscriptions in your component:
- ```javascript
- // components/Time.js
- import { useSubscription, gql } from '@apollo/client';
-
- const TIME_SUBSCRIPTION = gql`
- subscription {
- time
- }
- `;
-
- export default function Time() {
- const { data, loading } = useSubscription(TIME_SUBSCRIPTION);
-
- if (loading) return
Loading...
;
-
- return
Current time: {data.time}
;
- }
- ```
-
-2. **Optimizing Caching with Apollo Client**:
- - Configure cache policies in Apollo Client:
- ```javascript
- // lib/apolloClient.js
- import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-
- const client = new ApolloClient({
- uri: '/api/graphql',
- cache: new InMemoryCache({
- typePolicies: {
- Query: {
- fields: {
- hello: {
- read(existing) {
- return existing;
- },
- },
- },
- },
- },
- }),
- });
-
- export function ApolloProviderWrapper({ children }) {
- return {children};
- }
- ```
-
-3. **Using Advanced GraphQL Features**:
- - Utilize Apollo Client's built-in features for caching, pagination, optimistic UI updates, etc.
- - Refer to Apollo Client documentation for detailed examples and advanced use cases: [Apollo Client Docs](https://www.apollographql.com/docs/react/)
\ No newline at end of file
diff --git a/courses/Next.Js/advance-level/_category_.json b/courses/Next.Js/advance-level/_category_.json
deleted file mode 100644
index cd2d95485..000000000
--- a/courses/Next.Js/advance-level/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Advanced Level",
- "position": 3,
- "link": {
- "type": "generated-index",
- "description": "Learn Next.Js Advance Techniques."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/Frameworks.md b/courses/Next.Js/beginner-level/Introduction/Frameworks.md
deleted file mode 100644
index 2d939dde9..000000000
--- a/courses/Next.Js/beginner-level/Introduction/Frameworks.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-id: lesson-2
-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
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
-
-### 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.
diff --git a/courses/Next.Js/beginner-level/Introduction/_category_.json b/courses/Next.Js/beginner-level/Introduction/_category_.json
deleted file mode 100644
index 713020a21..000000000
--- a/courses/Next.Js/beginner-level/Introduction/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Introduction",
- "position": 1,
- "link": {
- "type": "generated-index",
- "description": "Let's Start with Next.Js."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/introduction.md b/courses/Next.Js/beginner-level/Introduction/introduction.md
deleted file mode 100644
index 9baba51c8..000000000
--- a/courses/Next.Js/beginner-level/Introduction/introduction.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-id: lesson-1
-title: Introduction to Next.js
-sidebar_label: Introduction
-sidebar_position: 1
-description: Introduction to Next.js
-tags: [courses, beginner-level, FramWorks, Introduction]
----
-
-## What is Next.js?
-
-**Next.js** is a React framework that enables server-side rendering and static site generation for React applications. Developed by Vercel, it aims to provide a seamless developer experience while enhancing performance, scalability, and SEO. Next.js builds on top of React and provides a number of additional features to improve the development process and application performance.
-
-:::note
-
-Next.js offers several key features that make it a popular choice for building React applications:
-
-1. **Server-Side Rendering (SSR)**: Next.js enables server-side rendering, which allows pages to be pre-rendered on the server and sent to the client as fully rendered HTML. This improves initial load times and SEO.
-
-2. **Static Site Generation (SSG)**: Next.js can generate static HTML at build time for pages that don't need to be rendered on every request. This results in fast load times and efficient performance.
-
-3. **Automatic Code Splitting**: Next.js automatically splits code into smaller bundles that are loaded only when needed, optimizing page load times and performance.
-
-4. **API Routes**: Next.js allows you to create API endpoints within the same application, simplifying the process of building full-stack applications.
-
-5. **Optimized Performance**: With features like automatic static optimization, image optimization, and lazy loading, Next.js applications are highly performant.
-
-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?
-
-Learning Next.js offers several benefits for developers looking to build modern web applications:
-
-1. **Improved Performance**: Next.js provides server-side rendering and static site generation, resulting in faster load times and better SEO performance.
-2. **Enhanced SEO**: Pre-rendered pages in Next.js improve search engine optimization by providing search engines with fully rendered HTML content.
-3. **Simplified Development**: Next.js simplifies the development process by offering features like automatic code splitting, API routes, and built-in CSS support.
-4. **Scalability**: Next.js applications are highly scalable and can handle increased traffic and data requirements effectively.
-5. **Full-Stack Development**: Next.js allows developers to build full-stack applications by integrating API routes and server-side rendering with React components.
-6. **Community and Ecosystem**: Next.js has a vibrant community and ecosystem, with extensive documentation, tutorials, and plugins available to support developers.
-7. **Career Opportunities**: Learning Next.js can open up career opportunities as Next.js developers are in demand due to the framework's popularity and versatility.
-8. **Modern Web Development**: Next.js is a modern framework that incorporates the latest web development practices and tools, making it a valuable skill for developers.
-9. **Vercel Integration**: Next.js is developed by Vercel, which offers hosting and deployment services that seamlessly integrate with Next.js applications.
-10. **React Compatibility**: Next.js is built on top of React, making it a natural choice for developers familiar with React who want to enhance their applications with server-side rendering and static site generation.
-11. **Performance Monitoring**: Next.js provides built-in performance monitoring tools that help developers optimize their applications for speed and efficiency.
-12. **Incremental Static Regeneration**: Next.js supports incremental static regeneration, allowing developers to update static pages without requiring a full rebuild of the site.
-13. **Hybrid Static and Server-Side Rendering**: Next.js allows developers to combine static site generation with server-side rendering for optimal performance and flexibility.
-14. **TypeScript Support**: Next.js has built-in support for TypeScript, enabling developers to write type-safe code and improve code quality and maintainability.
-15. **Internationalization**: Next.js provides built-in support for internationalization, making it easy to create multilingual applications with localized content.
-16. **Authentication and Authorization**: Next.js offers solutions for implementing authentication and authorization in applications, ensuring secure access to resources and data.
-17. **Testing and Debugging**: Next.js provides tools and utilities for testing and debugging applications, helping developers ensure the quality and reliability of their code.
-18. **Continuous Integration and Deployment**: Next.js applications can be easily integrated with CI/CD pipelines for automated testing, building, and deployment processes.
-19. **Serverless Functions**: Next.js allows developers to create serverless functions that can be deployed alongside their applications, enabling server-side logic without managing servers.
-20. **Data Fetching Strategies**: Next.js supports various data fetching strategies, including `getStaticProps`, `getServerSideProps`, and `useSWR`, to fetch data at build time or on each request.
-21. **Error Handling**: Next.js provides error handling mechanisms that help developers identify and resolve issues in their applications, ensuring a smooth user experience.
-22. **Optimized Image Loading**: Next.js offers optimized image loading techniques, such as automatic image optimization and lazy loading, to improve performance and reduce bandwidth usage.
-23. **SEO Metadata**: Next.js allows developers to define SEO metadata for pages, including titles, descriptions, and Open Graph tags, to enhance search engine visibility and social sharing.
-24. **Accessibility**: Next.js promotes accessibility best practices by providing tools and guidelines for creating inclusive web applications that are usable by all users.
-25. **Documentation and Support**: Next.js has comprehensive documentation and community support, making it easy for developers to learn and troubleshoot issues while building applications.
-
-By learning Next.js, developers can leverage these features and benefits to create high-performance, scalable, and modern web applications that meet the demands of today's digital landscape.
-
-## 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.
diff --git a/courses/Next.Js/beginner-level/Introduction/settingUp.md b/courses/Next.Js/beginner-level/Introduction/settingUp.md
deleted file mode 100644
index c08ea88e5..000000000
--- a/courses/Next.Js/beginner-level/Introduction/settingUp.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-id: lesson-3
-title: "Setting Up the Development Environment"
-sidebar_label: Setup
-sidebar_position: 3
-description: "Setting Up the Development Environment"
-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
- # or
- yarn create next-app my-next-app
- ```
-
-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
- # or
- yarn dev
- ```
- - Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see your Next.js application running.
-
-5. **Explore the Project Structure**:
-
- - Next.js projects have the following structure:
- ```
- my-next-app/
- ├── .next/ # Build output
- ├── node_modules/ # Node.js modules
- ├── pages/ # Pages and routes
- ├── public/ # Static assets
- ├── styles/ # Global styles
- ├── .gitignore # Git ignore file
- ├── package.json # Project metadata
- ├── README.md # Project README
- ```
-
-6. **Start Building Your Next.js Application**:
-
- - You're now ready to start building your Next.js application. Explore the project structure, create new pages, and customize your application as needed.
-
-By following these steps, you can set up a development environment for building Next.js applications and start creating modern web experiences with ease. Happy coding!
-
-## Additional Resources:
-
-- [Next.js Documentation](https://nextjs.org/docs)
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md b/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
deleted file mode 100644
index 4100c1118..000000000
--- a/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-id: lesson-2
-title: "Understanding the File-Based Routing System"
-sidebar_label: File-Based Routing System
-sidebar_position: 2
-description: "Understanding the File-Based Routing System"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-
-Next.js uses a file-based routing system, where the file structure inside the `src/pages` directory defines the routes of the application.
-
-1. **File and Folder Structure**:
- - Each file in `src/pages` represents a unique route based on its name and path.
- - Folders within `src/pages` can contain additional pages and create nested routes.
-
-2. **Example Structure**:
- ```
- src/pages/
- ├── about.js // Maps to /about
- ├── index.js // Maps to /
- ├── blog/
- │ ├── index.js // Maps to /blog
- │ └── [id].js // Maps to /blog/:id
- ├── contact.js // Maps to /contact
- └── products/
- ├── index.js // Maps to /products
- └── [id].js // Maps to /products/:id
- ```
-
-3. **Dynamic Routing**:
- - Dynamic routes can be created using square brackets in the file name. For example, `[id].js` creates a dynamic route that matches any value in place of `id`:
- ```javascript
- // src/pages/blog/[id].js
- import { useRouter } from 'next/router';
-
- export default function BlogPost() {
- const router = useRouter();
- const { id } = router.query;
-
- return
Blog Post {id}
;
- }
- ```
- - This file will be accessible at URLs like `/blog/1`, `/blog/2`, etc., where `1` and `2` are dynamic parameters.
-
-#### Nested Routes
-
-Nested routes can be achieved by creating folders within the `src/pages` directory and adding files within those folders.
-
-1. **Nested Route Example**:
- - Create a `products` directory inside `src/pages`:
- ```
- src/pages/products/
- ├── index.js // Maps to /products
- └── [id].js // Maps to /products/:id
- ```
-
-2. **Nested Index Page**:
- - The `index.js` file inside the `products` directory maps to the `/products` route:
- ```javascript
- // src/pages/products/index.js
- export default function Products() {
- return
Products Page
;
- }
- ```
-
-3. **Nested Dynamic Route**:
- - The `[id].js` file inside the `products` directory maps to dynamic routes like `/products/1`, `/products/2`, etc.:
- ```javascript
- // src/pages/products/[id].js
- import { useRouter } from 'next/router';
-
- export default function Product() {
- const router = useRouter();
- const { id } = router.query;
-
- return
Product {id}
;
- }
- ```
-
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/_category_.json b/courses/Next.Js/beginner-level/Pages-and-routing/_category_.json
deleted file mode 100644
index cb7010da8..000000000
--- a/courses/Next.Js/beginner-level/Pages-and-routing/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Pages and Routing",
- "position": 3,
- "link": {
- "type": "generated-index",
- "description": "Learn to Routing."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md b/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
deleted file mode 100644
index aecf68588..000000000
--- a/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-id: lesson-1
-title: "Pages and Routing in Next.js"
-sidebar_label: Pages and Routing
-sidebar_position: 1
-description: "Pages and Routing in Next.js"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-
-#### Creating Pages in Next.js
-
-In Next.js, pages are React components that are stored in the `src/pages` directory. Each file in this directory corresponds to a route in the application.
-
-1. **Basic Page Creation**:
- - To create a new page, add a new file to the `src/pages` directory. For example, to create an "About" page, create `src/pages/about.js`:
- ```javascript
- // src/pages/about.js
- export default function About() {
- return
About Us
;
- }
- ```
- - This file will be accessible at the `/about` URL.
-
-2. **Home Page**:
- - The default home page is created by adding `index.js` to the `src/pages` directory:
- ```javascript
- // src/pages/index.js
- export default function Home() {
- return
Welcome to Our Site
;
- }
- ```
- - This file will be accessible at the root URL `/`.
diff --git a/courses/Next.Js/beginner-level/Routes/Database.md b/courses/Next.Js/beginner-level/Routes/Database.md
deleted file mode 100644
index 0f365fe7f..000000000
--- a/courses/Next.Js/beginner-level/Routes/Database.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-id: lesson-2
-title: "Connecting API Routes to a Database"
-sidebar_label: Database Connection
-sidebar_position: 2
-description: "Connecting API Routes to a Database"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-
-You can connect your API routes to a database using popular database libraries like `mongoose` for MongoDB or `prisma` for SQL databases. Below is an example using MongoDB and Mongoose.
-
-1. **Install Mongoose**:
- ```bash
- npm install mongoose
- ```
-
-2. **Create a Database Connection Helper**:
- - Create a `src/lib/dbConnect.js` file to manage the database connection:
- ```javascript
- // src/lib/dbConnect.js
- import mongoose from 'mongoose';
-
- const MONGODB_URI = process.env.MONGODB_URI;
-
- if (!MONGODB_URI) {
- throw new Error(
- 'Please define the MONGODB_URI environment variable inside .env.local'
- );
- }
-
- let cached = global.mongoose;
-
- if (!cached) {
- cached = global.mongoose = { conn: null, promise: null };
- }
-
- async function dbConnect() {
- if (cached.conn) {
- return cached.conn;
- }
-
- if (!cached.promise) {
- const opts = {
- useNewUrlParser: true,
- useUnifiedTopology: true,
- bufferCommands: false,
- bufferMaxEntries: 0,
- useFindAndModify: false,
- useCreateIndex: true,
- };
-
- cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
- return mongoose;
- });
- }
- cached.conn = await cached.promise;
- return cached.conn;
- }
-
- export default dbConnect;
- ```
-
-3. **Create a Mongoose Model**:
- - Create a `src/models/User.js` file for the User model:
- ```javascript
- // src/models/User.js
- import mongoose from 'mongoose';
-
- const UserSchema = new mongoose.Schema({
- name: {
- type: String,
- required: [true, 'Please provide a name'],
- },
- email: {
- type: String,
- required: [true, 'Please provide an email'],
- unique: true,
- },
- });
-
- export default mongoose.models.User || mongoose.model('User', UserSchema);
- ```
-
-4. **Use the Database in API Routes**:
- - Update your API route to connect to the database and interact with the User model:
- ```javascript
- // src/pages/api/users.js
- import dbConnect from '../../lib/dbConnect';
- import User from '../../models/User';
-
- export default async function handler(req, res) {
- const { method } = req;
-
- await dbConnect();
-
- switch (method) {
- case 'GET':
- try {
- const users = await User.find({});
- res.status(200).json({ success: true, data: users });
- } catch (error) {
- res.status(400).json({ success: false, error });
- }
- break;
- case 'POST':
- try {
- const user = await User.create(req.body);
- res.status(201).json({ success: true, data: user });
- } catch (error) {
- res.status(400).json({ success: false, error });
- }
- break;
- default:
- res.setHeader('Allow', ['GET', 'POST']);
- res.status(405).end(`Method ${method} Not Allowed`);
- }
- }
- ```
-
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Routes/Introduction.md b/courses/Next.Js/beginner-level/Routes/Introduction.md
deleted file mode 100644
index 9ad05ac3c..000000000
--- a/courses/Next.Js/beginner-level/Routes/Introduction.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: lesson-1
-title: "API Routes in Next.js"
-sidebar_label: API Routes
-sidebar_position: 1
-description: "API Routes in Next.js"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-Next.js provides a simple way to create API routes that you can use to handle backend logic, such as interacting with a database or performing server-side operations. These routes can be created within the `src/pages/api` directory.
-
-#### Creating API Routes in Next.js
-
-1. **Basic API Route**:
- - Create a new file in the `src/pages/api` directory. For example, create `hello.js`:
- ```javascript
- // src/pages/api/hello.js
- export default function handler(req, res) {
- res.status(200).json({ message: 'Hello, world!' });
- }
- ```
- - This API route will be accessible at `/api/hello`.
-
-2. **Handling API Requests**:
- - API routes have access to the request (`req`) and response (`res`) objects, allowing you to handle different HTTP methods (GET, POST, PUT, DELETE, etc.).
-
-3. **Example with Multiple Methods**:
- ```javascript
- // src/pages/api/users.js
- export default function handler(req, res) {
- const { method } = req;
-
- switch (method) {
- case 'GET':
- // Handle GET request
- res.status(200).json({ message: 'GET request' });
- break;
- case 'POST':
- // Handle POST request
- const data = req.body;
- res.status(201).json({ message: 'User created', data });
- break;
- default:
- res.setHeader('Allow', ['GET', 'POST']);
- res.status(405).end(`Method ${method} Not Allowed`);
- }
- }
- ```
diff --git a/courses/Next.Js/beginner-level/Routes/_category_.json b/courses/Next.Js/beginner-level/Routes/_category_.json
deleted file mode 100644
index 8fb15c2a6..000000000
--- a/courses/Next.Js/beginner-level/Routes/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "API Routes",
- "position": 6,
- "link": {
- "type": "generated-index",
- "description": "Learn Next.Js API Routes."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Started/Running-development.md b/courses/Next.Js/beginner-level/Started/Running-development.md
deleted file mode 100644
index 85e1e369d..000000000
--- a/courses/Next.Js/beginner-level/Started/Running-development.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: lesson-2
-title: "Running the Development Server"
-sidebar_label: Development Server
-sidebar_position: 2
-description: "Learn Development Server"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-
-
-To run the development server and start your Next.js application:
-
-1. Navigate to the project directory:
- ```bash
- cd my-next-app
- ```
-
-2. Start the development server:
- ```bash
- npm run dev
- # or
- yarn dev
- ```
-
-3. Open your browser and navigate to [http://localhost:3000](http://localhost:3000). You should see your Next.js application running.
-
-#### Building and Deploying a Next.js App
-
-Next.js provides built-in commands to build and deploy your application.
-
-1. **Building the Application**:
- - Run the following command to create an optimized production build:
- ```bash
- npm run build
- # or
- yarn build
- ```
- - This will generate a `.next` directory containing the compiled application.
-
-2. **Starting the Production Server**:
- - After building the application, you can start the production server:
- ```bash
- npm start
- # or
- yarn start
- ```
-
-3. **Deploying the Application**:
- - **Vercel**: Vercel is the company behind Next.js and provides seamless integration for deploying Next.js applications.
- - Install the Vercel CLI:
- ```bash
- npm install -g vercel
- ```
- - Deploy your application:
- ```bash
- vercel
- ```
- - Follow the prompts to link your project to a Vercel account and deploy it.
-
- - **Other Hosting Providers**: Next.js can be deployed on various hosting providers like AWS, Azure, Google Cloud, and DigitalOcean.
- - Deploy the `.next` directory along with your project files to your preferred hosting provider.
- - Ensure the environment supports Node.js and configure the start command to `npm start` or `yarn start`.
-
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Started/_category_.json b/courses/Next.Js/beginner-level/Started/_category_.json
deleted file mode 100644
index 33c4c33a0..000000000
--- a/courses/Next.Js/beginner-level/Started/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Project Build & Deployment",
- "position": 2,
- "link": {
- "type": "generated-index",
- "description": "Project Build & Deployment."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Started/creating-project.md b/courses/Next.Js/beginner-level/Started/creating-project.md
deleted file mode 100644
index 44ed25dda..000000000
--- a/courses/Next.Js/beginner-level/Started/creating-project.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-id: lesson-1
-title: "Getting Started with Next.js"
-sidebar_label: Understanding Project
-sidebar_position: 1
-description: "Getting Started with Next.js"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-
-#### Creating a New Next.js Project
-
-To create a new Next.js project, you'll need to have Node.js and npm (or yarn) installed on your system. Follow these steps to set up your project:
-
-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
- # or
- yarn create next-app my-next-app
- ```
-
- - This command will prompt you to name your project and choose some initial configuration options. Once completed, it will generate a new Next.js project in a directory named `my-next-app`.
-
-#### Project Structure Overview
-
-A typical Next.js project has the following structure:
-
-```
-my-next-app/
-├── node_modules/
-├── public/
-│ ├── favicon.ico
-│ └── vercel.svg
-├── src/
-│ ├── pages/
-│ │ ├── api/
-│ │ │ └── hello.js
-│ │ ├── _app.js
-│ │ ├── _document.js
-│ │ └── index.js
-│ ├── styles/
-│ │ ├── globals.css
-│ │ └── Home.module.css
-│ └── components/
-│ └── [Your components here]
-├── .gitignore
-├── package.json
-├── README.md
-└── next.config.js
-```
-
-:::note
-**Key Directories and Files**:
-- **`public/`**: Contains static assets like images, fonts, and other files that you want to serve directly. Files in this directory are accessible from the root URL.
-- **`src/pages/`**: Each file in this directory automatically becomes a route. For example, `pages/index.js` maps to `/`, and `pages/about.js` maps to `/about`.
- - **`_app.js`**: Customizes the default App component used by Next.js to initialize pages.
- - **`_document.js`**: Customizes the default Document component, useful for augmenting the application's HTML and body tags.
- - **`api/`**: Contains serverless functions that map to `/api/*` routes.
-- **`src/styles/`**: Contains CSS files to style your application.
-- **`src/components/`**: Contains React components used across your application.
-- **`next.config.js`**: Customizes the Next.js configuration.
-- **`package.json`**: Lists dependencies and scripts for your project.
-:::
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Styling/Libraries.md b/courses/Next.Js/beginner-level/Styling/Libraries.md
deleted file mode 100644
index 2e00f4ffb..000000000
--- a/courses/Next.Js/beginner-level/Styling/Libraries.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-id: lesson-2
-title: "Integrating with CSS-in-JS Libraries"
-sidebar_label: CSS with Libraries
-sidebar_position: 2
-description: "Integrating with CSS-in-JS Libraries"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-
-Next.js supports popular CSS-in-JS libraries like styled-components and emotion.
-
-**Using styled-components**:
-
-1. **Install styled-components and babel-plugin-styled-components**:
- ```bash
- npm install styled-components
- npm install --save-dev babel-plugin-styled-components
- ```
-
-2. **Create a `.babelrc` File**:
- ```json
- {
- "presets": ["next/babel"],
- "plugins": [["styled-components", { "ssr": true }]]
- }
- ```
-
-3. **Use styled-components in a Component**:
- ```javascript
- // src/pages/index.js
- import styled from 'styled-components';
-
- const Title = styled.h1`
- color: #0070f3;
- font-size: 4rem;
- `;
-
- export default function Home() {
- return (
-
- );
- }
- ```
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Styling/_category_.json b/courses/Next.Js/beginner-level/Styling/_category_.json
deleted file mode 100644
index ee33dce5e..000000000
--- a/courses/Next.Js/beginner-level/Styling/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Styling in Next.js",
- "position": 5,
- "link": {
- "type": "generated-index",
- "description": "Styling in Next.js."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Styling/css-styling.md b/courses/Next.Js/beginner-level/Styling/css-styling.md
deleted file mode 100644
index b60e33ad3..000000000
--- a/courses/Next.Js/beginner-level/Styling/css-styling.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-id: lesson-1
-title: "Styling in Next.js"
-sidebar_label: Styling
-sidebar_position: 1
-description: "Styling in Next.js"
-tags: [courses,beginner-level,FramWorks,Introduction]
----
-
-Next.js offers several ways to style your applications, including using plain CSS, CSS Modules, Styled JSX, and integrating with popular CSS-in-JS libraries like styled-components and emotion.
-
-#### Using CSS in Next.js
-
-You can use global CSS files in your Next.js application by importing them in your `src/pages/_app.js` file.
-
-1. **Create a Global CSS File**:
- - Create a CSS file in the `src/styles` directory, e.g., `globals.css`:
- ```css
- /* src/styles/globals.css */
- body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
- }
- ```
-
-2. **Import the Global CSS File**:
- - Import the CSS file in `src/pages/_app.js`:
- ```javascript
- // src/pages/_app.js
- import '../styles/globals.css';
-
- function MyApp({ Component, pageProps }) {
- return ;
- }
-
- export default MyApp;
- ```
-
-#### CSS Modules
-
-CSS Modules provide a way to scope CSS to a specific component, avoiding global namespace collisions.
-
-1. **Create a CSS Module File**:
- - Create a CSS Module file, e.g., `Home.module.css`:
- ```css
- /* src/styles/Home.module.css */
- .container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100vh;
- }
-
- .title {
- font-size: 4rem;
- color: #0070f3;
- }
- ```
-
-2. **Import and Use the CSS Module in a Component**:
- - Import and apply the styles in your component:
- ```javascript
- // src/pages/index.js
- import styles from '../styles/Home.module.css';
-
- export default function Home() {
- return (
-
-
Welcome to Next.js!
-
- );
- }
- ```
-
-#### Styled JSX
-
-Styled JSX is built into Next.js and allows you to write scoped CSS directly within your components.
-
-1. **Use Styled JSX in a Component**:
- ```javascript
- // src/pages/index.js
- export default function Home() {
- return (
-
-
Welcome to Next.js!
-
-
- );
- }
- ```
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/_category_.json b/courses/Next.Js/beginner-level/_category_.json
deleted file mode 100644
index 38cbcaefb..000000000
--- a/courses/Next.Js/beginner-level/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Begginer Level",
- "position": 1,
- "link": {
- "type": "generated-index",
- "description": "Learn Next.Js Begginer Techniques."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/_category_.json b/courses/Next.Js/beginner-level/static-and-serverSide/_category_.json
deleted file mode 100644
index 24a4337b2..000000000
--- a/courses/Next.Js/beginner-level/static-and-serverSide/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Static and Server-Side Rendering",
- "position": 4,
- "link": {
- "type": "generated-index",
- "description": "Learn Next.Js Static and Server-Side Rendering."
- }
- }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/concept.md b/courses/Next.Js/beginner-level/static-and-serverSide/concept.md
deleted file mode 100644
index 5483dc2f4..000000000
--- a/courses/Next.Js/beginner-level/static-and-serverSide/concept.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-id: lesson-2
-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]
----
-
-#### 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";
-
- 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 post = await res.json();
-
- return {
- props: {
- post,
- },
- };
- }
-
- export async function getStaticPaths() {
- // Specify dynamic routes to pre-render based on data
- const res = await fetch("https://jsonplaceholder.typicode.com/posts");
- const posts = await res.json();
-
- const paths = posts.map((post) => ({
- params: { id: post.id.toString() },
- }));
-
- return {
- paths,
- fallback: false,
- };
- }
-
- export default function Post({ post }) {
- const router = useRouter();
- if (router.isFallback) {
- return
Loading...
;
- }
-
- return (
-
-
{post.title}
-
{post.body}
-
- );
- }
- ```
-
-2. **Explanation**:
- - `getStaticProps` fetches data at build time and passes it as props to the page component.
- - `getStaticPaths` specifies the dynamic routes to be pre-rendered.
- - `fallback: false` ensures that only the specified paths are generated at build time.
-
-#### Implementing Server-Side Rendering (`getServerSideProps`)
-
-`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 profile = await res.json();
-
- return {
- props: {
- profile,
- },
- };
- }
-
- export default function Profile({ profile }) {
- return (
-
-
{profile.name}
-
{profile.email}
-
- );
- }
- ```
-
-2. **Explanation**:
- - `getServerSideProps` fetches data on each request and passes it as props to the page component.
- - This method ensures that the page is always up-to-date with the latest data.
-
-#### Incremental Static Regeneration (ISR)
-
-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 post = await res.json();
-
- return {
- props: {
- post,
- },
- revalidate: 10, // Revalidate the page every 10 seconds
- };
- }
-
- export async function getStaticPaths() {
- const res = await fetch("https://jsonplaceholder.typicode.com/posts");
- const posts = await res.json();
-
- const paths = posts.map((post) => ({
- params: { id: post.id.toString() },
- }));
-
- return {
- paths,
- fallback: true,
- };
- }
-
- export default function Post({ post }) {
- const router = useRouter();
- if (router.isFallback) {
- return
Loading...
;
- }
-
- return (
-
-
{post.title}
-
{post.body}
-
- );
- }
- ```
-
-2. **Explanation**:
- - `revalidate`: Specifies the number of seconds after which the page should be regenerated.
- - With ISR, the page will be updated in the background after the specified time, providing fresh content without a full rebuild.
-
-#### 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.
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md b/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
deleted file mode 100644
index 95b07c2e8..000000000
--- a/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-id: lesson-1
-title: "Static and Server-Side Rendering in Next.js"
-sidebar_label: Static and Server-Side Rendering
-sidebar_position: 1
-description: "Static and Server-Side Rendering in Next.js"
-tags: [courses, beginner-level, FramWorks, Introduction]
----
-
-## Difference Between Static and Server-Side Rendering
-
-**Static Rendering (Static Site Generation - SSG)**:
-
-- **Pre-rendering**: Pages are generated at build time, and the HTML is created once and reused for each request.
-- **Performance**: Faster since the content is pre-rendered and served as static files.
-- **Use Cases**: Ideal for pages that do not require frequent updates, such as blogs, documentation, and marketing pages.
-
-**Server-Side Rendering (SSR)**:
-
-- **On-Demand Rendering**: Pages are generated on each request, fetching data and rendering HTML dynamically.
-- **Performance**: Slower compared to static rendering because the server must generate the HTML for each request.
-- **Use Cases**: Suitable for pages that require real-time data or frequent updates, such as dashboards, user profiles, and dynamic content.
-
-## 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 title="pages/posts/[id].js"
- 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 post = await res.json();
-
- return {
- props: {
- post,
- },
- };
- }
-
- export async function getStaticPaths() {
- // Specify dynamic routes to pre-render based on data
- const res = await fetch("https://jsonplaceholder.typicode.com/posts");
- const posts = await res.json();
-
- const paths = posts.map((post) => ({
- params: { id: post.id.toString() },
- }));
-
- return {
- paths,
- fallback: false,
- };
- }
-
- export default function Post({ post }) {
- const router = useRouter();
- if (router.isFallback) {
- return
Loading...
;
- }
-
- return (
-
-
{post.title}
-
{post.body}
-
- );
- }
- ```
-
-2. **Explanation**:
-
- - `getStaticProps` fetches data at build time and passes it as props to the page component.
- - `getStaticPaths` specifies the dynamic routes to be pre-rendered.
- - `fallback: false` ensures that only the specified paths are generated at build time.
- - `router.isFallback` checks if the page is in fallback mode and displays a loading indicator.
- - The `Post` component displays the post title and body fetched from the API.
-
-## Implementing Server-Side Rendering (`getServerSideProps`)
-
-`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 title="pages/user/[id].js"
- import { useRouter } from "next/router";
-
- export async function getServerSideProps({ params }) {
- // Fetch user data using the id from params
- const res = await fetch(
- `https://jsonplaceholder.typicode.com/users/${params.id}`,
- );
- const user = await res.json();
-
- return {
- props: {
- user,
- },
- };
- }
-
- export default function User({ user }) {
- return (
-
-
{user.name}
-
Email: {user.email}
-
- );
- }
- ```
-
-2. **Explanation**:
-
- - `getServerSideProps` fetches data on each request and passes it as props to the page component.
- - The `User` component displays the user's name and email fetched from the API.
-
-In this lesson, you learned about static and server-side rendering in Next.js and how to implement them using `getStaticProps` and `getServerSideProps` functions. Static rendering is ideal for content that does not change frequently, while server-side rendering is suitable for real-time data and dynamic content.
From 809db018794336f2197f48400a1c2bda8a3ec8e3 Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Sat, 20 Jul 2024 21:53:05 +0530
Subject: [PATCH 2/5] Add files via upload
---
.../Authentication/Implement-Auth.md | 77 ++++++
.../Intermediate-level/Authentication/JWT.md | 53 ++++
.../Authentication/Role-based.md | 61 +++++
.../Authentication/_category_.json | 8 +
.../Authentication/protection-Routes.md | 73 ++++++
.../Data-Fetching/GraphQl.md | 69 ++++++
.../Data-Fetching/Handling.md | 73 ++++++
.../Intermediate-level/Data-Fetching/SWR.md | 48 ++++
.../Data-Fetching/_category_.json | 8 +
.../Data-Fetching/fetching-Data.md | 119 +++++++++
.../Internationalization/Handling-dynamic.md | 60 +++++
.../Internationalization/Introduction.md | 72 ++++++
.../Loading-and-Managing.md | 79 ++++++
.../Internationalization/_category_.json | 8 +
.../Middleware/Introduction.md | 86 +++++++
.../Middleware/Middleware-concept.md | 55 +++++
.../Middleware/_category_.json | 8 +
.../Middleware/routing-tech.md | 42 ++++
.../Intermediate-level/_category_.json | 8 +
courses/Next.Js/Overview.md | 80 +++++++
courses/Next.Js/_category_.json | 8 +
.../Advance-Routing/Customizing.md | 136 +++++++++++
.../Advance-Routing/Dynamic-Route.md | 80 +++++++
.../Advance-Routing/_category_.json | 8 +
.../Advance-data-fetching/_category_.json | 8 +
.../dynamic-generation.md | 191 +++++++++++++++
.../static-generation.md | 100 ++++++++
.../Advance-server-side-render/SSR.md | 160 +++++++++++++
.../_category_.json | 8 +
.../Advance-server-side-render/customize.md | 142 +++++++++++
.../advance-level/GraphQL/Introduction.md | 106 ++++++++
.../advance-level/GraphQL/_category_.json | 8 +
.../advance-level/GraphQL/apollo-client.md | 226 ++++++++++++++++++
courses/Next.Js/advance-level/_category_.json | 8 +
.../beginner-level/Introduction/Frameworks.md | 22 ++
.../Introduction/_category_.json | 8 +
.../Introduction/introduction.md | 31 +++
.../beginner-level/Introduction/settingUp.md | 39 +++
.../Pages-and-routing/FIlebase-Routing.md | 91 +++++++
.../Pages-and-routing/_category_.json | 8 +
.../Pages-and-routing/creating-pages.md | 45 ++++
.../Next.Js/beginner-level/Routes/Database.md | 140 +++++++++++
.../beginner-level/Routes/Introduction.md | 48 ++++
.../beginner-level/Routes/_category_.json | 8 +
.../Started/Running-development.md | 66 +++++
.../beginner-level/Started/_category_.json | 8 +
.../Started/creating-project.md | 67 ++++++
.../beginner-level/Styling/Libraries.md | 80 +++++++
.../beginner-level/Styling/_category_.json | 8 +
.../beginner-level/Styling/css-styling.md | 104 ++++++++
.../Next.Js/beginner-level/_category_.json | 8 +
.../static-and-serverSide/_category_.json | 8 +
.../static-and-serverSide/concept.md | 170 +++++++++++++
.../static-and-serverSide/introduction.md | 21 ++
54 files changed, 3256 insertions(+)
create mode 100644 courses/Next.Js/Intermediate-level/Authentication/Implement-Auth.md
create mode 100644 courses/Next.Js/Intermediate-level/Authentication/JWT.md
create mode 100644 courses/Next.Js/Intermediate-level/Authentication/Role-based.md
create mode 100644 courses/Next.Js/Intermediate-level/Authentication/_category_.json
create mode 100644 courses/Next.Js/Intermediate-level/Authentication/protection-Routes.md
create mode 100644 courses/Next.Js/Intermediate-level/Data-Fetching/GraphQl.md
create mode 100644 courses/Next.Js/Intermediate-level/Data-Fetching/Handling.md
create mode 100644 courses/Next.Js/Intermediate-level/Data-Fetching/SWR.md
create mode 100644 courses/Next.Js/Intermediate-level/Data-Fetching/_category_.json
create mode 100644 courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
create mode 100644 courses/Next.Js/Intermediate-level/Internationalization/Handling-dynamic.md
create mode 100644 courses/Next.Js/Intermediate-level/Internationalization/Introduction.md
create mode 100644 courses/Next.Js/Intermediate-level/Internationalization/Loading-and-Managing.md
create mode 100644 courses/Next.Js/Intermediate-level/Internationalization/_category_.json
create mode 100644 courses/Next.Js/Intermediate-level/Middleware/Introduction.md
create mode 100644 courses/Next.Js/Intermediate-level/Middleware/Middleware-concept.md
create mode 100644 courses/Next.Js/Intermediate-level/Middleware/_category_.json
create mode 100644 courses/Next.Js/Intermediate-level/Middleware/routing-tech.md
create mode 100644 courses/Next.Js/Intermediate-level/_category_.json
create mode 100644 courses/Next.Js/Overview.md
create mode 100644 courses/Next.Js/_category_.json
create mode 100644 courses/Next.Js/advance-level/Advance-Routing/Customizing.md
create mode 100644 courses/Next.Js/advance-level/Advance-Routing/Dynamic-Route.md
create mode 100644 courses/Next.Js/advance-level/Advance-Routing/_category_.json
create mode 100644 courses/Next.Js/advance-level/Advance-data-fetching/_category_.json
create mode 100644 courses/Next.Js/advance-level/Advance-data-fetching/dynamic-generation.md
create mode 100644 courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
create mode 100644 courses/Next.Js/advance-level/Advance-server-side-render/SSR.md
create mode 100644 courses/Next.Js/advance-level/Advance-server-side-render/_category_.json
create mode 100644 courses/Next.Js/advance-level/Advance-server-side-render/customize.md
create mode 100644 courses/Next.Js/advance-level/GraphQL/Introduction.md
create mode 100644 courses/Next.Js/advance-level/GraphQL/_category_.json
create mode 100644 courses/Next.Js/advance-level/GraphQL/apollo-client.md
create mode 100644 courses/Next.Js/advance-level/_category_.json
create mode 100644 courses/Next.Js/beginner-level/Introduction/Frameworks.md
create mode 100644 courses/Next.Js/beginner-level/Introduction/_category_.json
create mode 100644 courses/Next.Js/beginner-level/Introduction/introduction.md
create mode 100644 courses/Next.Js/beginner-level/Introduction/settingUp.md
create mode 100644 courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
create mode 100644 courses/Next.Js/beginner-level/Pages-and-routing/_category_.json
create mode 100644 courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
create mode 100644 courses/Next.Js/beginner-level/Routes/Database.md
create mode 100644 courses/Next.Js/beginner-level/Routes/Introduction.md
create mode 100644 courses/Next.Js/beginner-level/Routes/_category_.json
create mode 100644 courses/Next.Js/beginner-level/Started/Running-development.md
create mode 100644 courses/Next.Js/beginner-level/Started/_category_.json
create mode 100644 courses/Next.Js/beginner-level/Started/creating-project.md
create mode 100644 courses/Next.Js/beginner-level/Styling/Libraries.md
create mode 100644 courses/Next.Js/beginner-level/Styling/_category_.json
create mode 100644 courses/Next.Js/beginner-level/Styling/css-styling.md
create mode 100644 courses/Next.Js/beginner-level/_category_.json
create mode 100644 courses/Next.Js/beginner-level/static-and-serverSide/_category_.json
create mode 100644 courses/Next.Js/beginner-level/static-and-serverSide/concept.md
create mode 100644 courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
diff --git a/courses/Next.Js/Intermediate-level/Authentication/Implement-Auth.md b/courses/Next.Js/Intermediate-level/Authentication/Implement-Auth.md
new file mode 100644
index 000000000..53658058b
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Authentication/Implement-Auth.md
@@ -0,0 +1,77 @@
+---
+id: lesson-1
+title: "Authentication and Authorization in Next.js"
+sidebar_label: Authentication and Authorization
+sidebar_position: 1
+description: "Authentication and Authorization in Next.js"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+
+
+Implementing authentication and authorization in Next.js can be streamlined using libraries like NextAuth.js for handling various authentication strategies, JWT-based authentication for token management, and role-based access control to protect routes and API endpoints.
+
+#### Implementing Authentication with NextAuth.js
+
+NextAuth.js is a flexible authentication library for Next.js applications. It supports various authentication providers like Google, GitHub, and custom email/password.
+
+1. **Install NextAuth.js**:
+ ```bash
+ npm install next-auth
+ ```
+
+2. **Configure NextAuth.js**:
+ - Create a new API route for NextAuth in `src/pages/api/auth/[...nextauth].js`:
+ ```javascript
+ // src/pages/api/auth/[...nextauth].js
+ import NextAuth from 'next-auth';
+ import Providers from 'next-auth/providers';
+
+ export default NextAuth({
+ providers: [
+ Providers.Google({
+ clientId: process.env.GOOGLE_CLIENT_ID,
+ clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+ }),
+ // Add other providers here
+ ],
+ database: process.env.DATABASE_URL, // Optional: For storing user accounts in a database
+ });
+ ```
+
+3. **Add Environment Variables**:
+ - Create a `.env.local` file in the root of your project and add the required environment variables:
+ ```env
+ GOOGLE_CLIENT_ID=your-google-client-id
+ GOOGLE_CLIENT_SECRET=your-google-client-secret
+ DATABASE_URL=your-database-url
+ ```
+
+4. **Add Authentication to Pages**:
+ - Use the `useSession` hook to access the authentication session:
+ ```javascript
+ // src/pages/index.js
+ import { useSession, signIn, signOut } from 'next-auth/client';
+
+ export default function Home() {
+ const [session, loading] = useSession();
+
+ return (
+
+
NextAuth.js Authentication
+ {loading &&
Loading...
}
+ {!session && (
+
+
You are not signed in.
+
+
+ )}
+ {session && (
+
+
Signed in as {session.user.email}
+
+
+ )}
+
+ );
+ }
+ ```
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Authentication/JWT.md b/courses/Next.Js/Intermediate-level/Authentication/JWT.md
new file mode 100644
index 000000000..cd2d48999
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Authentication/JWT.md
@@ -0,0 +1,53 @@
+---
+id: lesson-2
+title: "JWT-Based Authentication"
+sidebar_label: JWT-Based Authentication
+sidebar_position: 2
+description: "JWT-Based Authentication"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+
+
+JWT (JSON Web Token) is a common method for securing APIs by encoding user information within a token.
+
+1. **Install JWT Dependencies**:
+ ```bash
+ npm install jsonwebtoken
+ ```
+
+2. **Generate JWTs**:
+ ```javascript
+ // src/utils/jwt.js
+ import jwt from 'jsonwebtoken';
+
+ const secret = process.env.JWT_SECRET;
+
+ export function generateToken(user) {
+ return jwt.sign({ id: user.id, email: user.email }, secret, { expiresIn: '1h' });
+ }
+
+ export function verifyToken(token) {
+ try {
+ return jwt.verify(token, secret);
+ } catch (err) {
+ return null;
+ }
+ }
+ ```
+
+3. **Protecting API Routes**:
+ ```javascript
+ // src/pages/api/protected.js
+ import { verifyToken } from '../../utils/jwt';
+
+ export default function handler(req, res) {
+ const token = req.headers.authorization?.split(' ')[1];
+ const user = verifyToken(token);
+
+ if (!user) {
+ return res.status(401).json({ message: 'Unauthorized' });
+ }
+
+ res.status(200).json({ message: 'This is a protected route', user });
+ }
+ ```
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Authentication/Role-based.md b/courses/Next.Js/Intermediate-level/Authentication/Role-based.md
new file mode 100644
index 000000000..69a4ad9a9
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Authentication/Role-based.md
@@ -0,0 +1,61 @@
+---
+id: lesson-3
+title: "Role-Based Access Control"
+sidebar_label: Protecting Routes and API Endpoints
+sidebar_position: 3
+description: "Role-Based Access Control"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+
+
+
+1. **Assign Roles to Users**:
+ - Modify your user model to include roles:
+ ```javascript
+ // src/models/User.js
+ import mongoose from 'mongoose';
+
+ const UserSchema = new mongoose.Schema({
+ name: String,
+ email: String,
+ role: {
+ type: String,
+ enum: ['user', 'admin'],
+ default: 'user',
+ },
+ });
+
+ export default mongoose.models.User || mongoose.model('User', UserSchema);
+ ```
+
+2. **Create Middleware for Role-Based Access Control**:
+ ```javascript
+ // src/utils/withRole.js
+ import { verifyToken } from './jwt';
+
+ export function withRole(handler, role) {
+ return async (req, res) => {
+ const token = req.headers.authorization?.split(' ')[1];
+ const user = verifyToken(token);
+
+ if (!user || user.role !== role) {
+ return res.status(403).json({ message: 'Forbidden' });
+ }
+
+ req.user = user;
+ return handler(req, res);
+ };
+ }
+ ```
+
+3. **Protect Routes with Role-Based Access Control**:
+ ```javascript
+ // src/pages/api/admin.js
+ import { withRole } from '../../utils/withRole';
+
+ const handler = (req, res) => {
+ res.status(200).json({ message: 'Admin route', user: req.user });
+ };
+
+ export default withRole(handler, 'admin');
+ ```
diff --git a/courses/Next.Js/Intermediate-level/Authentication/_category_.json b/courses/Next.Js/Intermediate-level/Authentication/_category_.json
new file mode 100644
index 000000000..005cbdc85
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Authentication/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Authentication and Authorization",
+ "position": 2,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn Next.Js Authentication and Authorization."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Authentication/protection-Routes.md b/courses/Next.Js/Intermediate-level/Authentication/protection-Routes.md
new file mode 100644
index 000000000..ce7bd3cdb
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Authentication/protection-Routes.md
@@ -0,0 +1,73 @@
+---
+id: lesson-4
+title: "Protecting Routes and API Endpoints"
+sidebar_label: Protecting Routes and API Endpoints
+sidebar_position: 4
+description: "Protecting Routes and API Endpoints"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+
+
+1. **Protecting Next.js Pages**:
+ - Use the `getServerSideProps` function to protect pages:
+ ```javascript
+ // src/pages/protected.js
+ import { getSession } from 'next-auth/client';
+
+ export default function ProtectedPage({ session }) {
+ if (!session) {
+ return
Access Denied
;
+ }
+
+ return
Welcome, {session.user.email}
;
+ }
+
+ export async function getServerSideProps(context) {
+ const session = await getSession(context);
+
+ if (!session) {
+ return {
+ redirect: {
+ destination: '/api/auth/signin',
+ permanent: false,
+ },
+ };
+ }
+
+ return {
+ props: { session },
+ };
+ }
+ ```
+
+2. **Protecting API Endpoints with Middleware**:
+ ```javascript
+ // src/utils/withAuth.js
+ import { verifyToken } from './jwt';
+
+ export function withAuth(handler) {
+ return async (req, res) => {
+ const token = req.headers.authorization?.split(' ')[1];
+ const user = verifyToken(token);
+
+ if (!user) {
+ return res.status(401).json({ message: 'Unauthorized' });
+ }
+
+ req.user = user;
+ return handler(req, res);
+ };
+ }
+ ```
+
+ ```javascript
+ // src/pages/api/protected.js
+ import { withAuth } from '../../utils/withAuth';
+
+ const handler = (req, res) => {
+ res.status(200).json({ message: 'Protected route', user: req.user });
+ };
+
+ export default withAuth(handler);
+ ```
+
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/GraphQl.md b/courses/Next.Js/Intermediate-level/Data-Fetching/GraphQl.md
new file mode 100644
index 000000000..d32a1a349
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Data-Fetching/GraphQl.md
@@ -0,0 +1,69 @@
+---
+id: lesson-3
+title: "Using GraphQL with Next.js"
+sidebar_label: Data Fetching and Caching
+sidebar_position: 3
+description: "Using GraphQL with Next.js"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+
+
+You can use GraphQL with Next.js using Apollo Client or other GraphQL clients.
+
+1. **Install Apollo Client**:
+ ```bash
+ npm install @apollo/client graphql
+ ```
+
+2. **Setup Apollo Client**:
+ ```javascript
+ // src/lib/apolloClient.js
+ import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+ const client = new ApolloClient({
+ uri: 'https://your-graphql-endpoint',
+ cache: new InMemoryCache(),
+ });
+
+ export default client;
+ ```
+
+3. **Use Apollo Client in a Page**:
+ ```javascript
+ // src/pages/index.js
+ import { ApolloProvider, gql, useQuery } from '@apollo/client';
+ import client from '../lib/apolloClient';
+
+ const GET_POSTS = gql`
+ query GetPosts {
+ posts {
+ id
+ title
+ }
+ }
+ `;
+
+ function Posts() {
+ const { loading, error, data } = useQuery(GET_POSTS);
+
+ if (loading) return
+
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/SWR.md b/courses/Next.Js/Intermediate-level/Data-Fetching/SWR.md
new file mode 100644
index 000000000..e1daeacb4
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Data-Fetching/SWR.md
@@ -0,0 +1,48 @@
+---
+id: lesson-2
+title: "SWR (Stale-While-Revalidate) for Data Fetching and Caching"
+sidebar_label: SWR (Stale-While-Revalidate)
+sidebar_position: 2
+description: "SWR (Stale-While-Revalidate) for Data Fetching and Caching"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+
+
+
+SWR is a React Hooks library for data fetching, providing features like caching, revalidation, focus tracking, and more.
+
+1. **Install SWR**:
+ ```bash
+ npm install swr
+ ```
+
+2. **Using SWR**:
+ ```javascript
+ // src/pages/index.js
+ import useSWR from 'swr';
+
+ const fetcher = url => fetch(url).then(res => res.json());
+
+ export default function Home() {
+ const { data: posts, error } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);
+
+ if (error) return
Failed to load
;
+ if (!posts) return
Loading...
;
+
+ return (
+
+
Posts
+
+ {posts.map(post => (
+
{post.title}
+ ))}
+
+
+ );
+ }
+ ```
+
+**Key Features of SWR**:
+- **Stale-While-Revalidate**: Data is returned from the cache first (stale), then fetches the latest data in the background (revalidate).
+- **Automatic Revalidation**: Data is revalidated on focus, network reconnect, and interval-based revalidation.
+- **Error Handling**: Provides built-in error handling and state management.
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/_category_.json b/courses/Next.Js/Intermediate-level/Data-Fetching/_category_.json
new file mode 100644
index 000000000..23e48253e
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Data-Fetching/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Data Fetching",
+ "position": 1,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn Next.Js Data Fetching."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md b/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
new file mode 100644
index 000000000..a76fc371d
--- /dev/null
+++ b/courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md
@@ -0,0 +1,119 @@
+---
+id: lesson-1
+title: "Data Fetching and Caching in Next.js"
+sidebar_label: Data Fetching and Caching
+sidebar_position: 1
+description: "Data Fetching and Caching in Next.js"
+tags: [courses,intermediate-level,FramWorks,Introduction]
+---
+
+
+Efficient data fetching and caching are crucial for building performant and responsive web applications. Next.js provides several methods for fetching data, including the use of the SWR (Stale-While-Revalidate) library for caching. Additionally, Next.js supports fetching data from GraphQL APIs.
+
+#### Fetching Data from APIs
+
+Next.js allows you to fetch data in different ways depending on your requirements. The primary methods are:
+
+1. **`getStaticProps`**: Fetch data at build time for static generation.
+2. **`getServerSideProps`**: Fetch data on each request for server-side rendering.
+3. **Client-Side Fetching**: Fetch data on the client side, typically using `useEffect`.
+
+**Example with `getStaticProps`**:
+```javascript
+// src/pages/index.js
+export async function getStaticProps() {
+ const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+ const posts = await res.json();
+
+ return {
+ props: {
+ posts,
+ },
+ };
+}
+
+export default function Home({ posts }) {
+ return (
+
+
+
+3. **Prefetching Data**:
+ - Prefetch data for links using the `next/link` component to improve navigation speed.
+ ```javascript
+ import Link from 'next/link';
+
+ export default function Home() {
+ return (
+
+
+
+
+4. **Using SWR for Client-side Caching**:
+ - `SWR` (Stale-While-Revalidate) is a React Hooks library for data fetching that provides caching and revalidation.
+ ```javascript
+ import useSWR from 'swr';
+
+ const fetcher = (url) => fetch(url).then((res) => res.json());
+
+ export default function DataComponent() {
+ const { data, error } = useSWR('/api/data', fetcher);
+
+ if (error) return
Failed to load
;
+ if (!data) return
Loading...
;
+
+ return
Data: {JSON.stringify(data)}
;
+ }
+ ```
+
diff --git a/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md b/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
new file mode 100644
index 000000000..bc4bc9e0a
--- /dev/null
+++ b/courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md
@@ -0,0 +1,100 @@
+---
+id: lesson-1
+title: "Advanced Data Fetching in Next.js"
+sidebar_label: Advanced Data Fetching in Next.js
+sidebar_position: 1
+description: "Advanced Data Fetching in Next.js"
+tags: [courses,Advance-level,FramWorks,Introduction]
+---
+
+
+
+Next.js provides powerful data fetching capabilities to optimize the performance and scalability of your application. This involves using static generation with revalidation, server-side rendering with caching strategies, combining static and dynamic data fetching, and optimizing these processes for performance.
+
+#### Static Generation with Revalidation
+
+Static generation with revalidation allows you to generate static pages at build time and update them at runtime when necessary.
+
+1. **Setting up Static Generation with Revalidation**:
+ ```javascript
+ // pages/index.js
+ export async function getStaticProps() {
+ // Fetch data
+ const res = await fetch('https://api.example.com/data');
+ const data = await res.json();
+
+ return {
+ props: {
+ data,
+ },
+ revalidate: 10, // Revalidate every 10 seconds
+ };
+ }
+
+ export default function Home({ data }) {
+ return (
+
+
Static Generation with Revalidation
+
{JSON.stringify(data, null, 2)}
+
+ );
+ }
+ ```
+
+
+
+#### Server-side Rendering with Caching Strategies
+
+Server-side rendering (SSR) can be optimized using caching strategies to improve performance and reduce server load.
+
+1. **Setting up Server-side Rendering with Caching**:
+ ```javascript
+ // pages/ssr.js
+ export async function getServerSideProps(context) {
+ const res = await fetch('https://api.example.com/data');
+ const data = await res.json();
+
+ context.res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
+
+ return {
+ props: {
+ data,
+ },
+ };
+ }
+
+ export default function SSR({ data }) {
+ return (
+
+
Server-side Rendering with Caching
+
{JSON.stringify(data, null, 2)}
+
+ );
+ }
+ ```
+
+2. **Using Cache-Control Headers**:
+ - `s-maxage=10`: Cache the response on the server for 10 seconds.
+ - `stale-while-revalidate`: Serve stale content while revalidating in the background.
+
+**Output:**
+
+
+
Static Generation with Revalidation
+
+
+
+
+
\ No newline at end of file
diff --git a/courses/Next.Js/advance-level/Advance-server-side-render/SSR.md b/courses/Next.Js/advance-level/Advance-server-side-render/SSR.md
new file mode 100644
index 000000000..d6a40f93f
--- /dev/null
+++ b/courses/Next.Js/advance-level/Advance-server-side-render/SSR.md
@@ -0,0 +1,160 @@
+---
+id: lesson-2
+title: "Optimizing SSR for Performance"
+sidebar_label: Optimizing SSR
+sidebar_position: 2
+description: "Optimizing SSR for Performance"
+tags: [courses,Advance-level,FramWorks,Introduction]
+---
+
+
+
+1. **Caching Responses**:
+ - Use caching strategies to reduce the load on the server.
+ ```javascript
+ // pages/index.js
+ export async function getServerSideProps(context) {
+ const cache = new Map();
+ const cacheKey = 'data';
+
+ if (cache.has(cacheKey)) {
+ return {
+ props: {
+ data: cache.get(cacheKey),
+ },
+ };
+ }
+
+ const res = await fetch('https://api.example.com/data');
+ const data = await res.json();
+ cache.set(cacheKey, data);
+
+ return {
+ props: {
+ data,
+ },
+ };
+ }
+ ```
+
+2. **Optimizing Data Fetching**:
+ - Fetch only necessary data and minimize the amount of data sent to the client.
+ ```javascript
+ // pages/index.js
+ export async function getServerSideProps(context) {
+ const res = await fetch('https://api.example.com/data?fields=id,name');
+ const data = await res.json();
+
+ return {
+ props: {
+ data,
+ },
+ };
+ }
+ ```
+
+3. **Using Static Generation with Revalidation**:
+ - Use static generation with incremental static regeneration (ISR) for frequently updated data.
+ ```javascript
+ // pages/index.js
+ export async function getStaticProps() {
+ const res = await fetch('https://api.example.com/data');
+ const data = await res.json();
+
+ return {
+ props: {
+ data,
+ },
+ revalidate: 60, // Revalidate every 60 seconds
+ };
+ }
+
+ export default function Home({ data }) {
+ return (
+
+ );
+ }
+ ```
+
+#### Advanced GraphQL Features (Subscriptions, Caching)
+
+1. **Setting Up Subscriptions**:
+ - For subscriptions, you need to set up a WebSocket server. First, install the required packages:
+ ```bash
+ npm install subscriptions-transport-ws @apollo/client graphql-ws
+ ```
+
+ - Configure your Apollo Server to support subscriptions:
+ ```javascript
+ // pages/api/graphql.js
+ import { ApolloServer, gql } from 'apollo-server-micro';
+ import { useServer } from 'graphql-ws/lib/use/ws';
+ import { WebSocketServer } from 'ws';
+
+ const typeDefs = gql`
+ type Query {
+ hello: String
+ }
+ type Subscription {
+ time: String
+ }
+ `;
+
+ const resolvers = {
+ Query: {
+ hello: () => 'Hello, world!',
+ },
+ Subscription: {
+ time: {
+ subscribe: (_, __, { pubsub }) => {
+ setInterval(() => pubsub.publish('TIME', { time: new Date().toISOString() }), 1000);
+ return pubsub.asyncIterator('TIME');
+ },
+ },
+ },
+ };
+
+ const pubsub = new PubSub();
+ const apolloServer = new ApolloServer({ typeDefs, resolvers, context: { pubsub } });
+
+ export const config = {
+ api: {
+ bodyParser: false,
+ },
+ };
+
+ const startServer = apolloServer.start();
+
+ export default async function handler(req, res) {
+ await startServer;
+ await apolloServer.createHandler({ path: '/api/graphql' })(req, res);
+ }
+
+ // Setup WebSocket server
+ const wsServer = new WebSocketServer({ port: 4000 });
+ useServer({ schema: apolloServer.schema }, wsServer);
+ ```
+
+ - Connect to the subscription server in your client:
+ ```javascript
+ // lib/apolloClient.js
+ import { ApolloClient, InMemoryCache, ApolloProvider, split } from '@apollo/client';
+ import { WebSocketLink } from '@apollo/client/link/ws';
+ import { createHttpLink } from '@apollo/client';
+ import { getMainDefinition } from '@apollo/client/utilities';
+
+ const httpLink = createHttpLink({
+ uri: '/api/graphql',
+ });
+
+ const wsLink = new WebSocketLink({
+ uri: 'ws://localhost:4000/graphql',
+ options: {
+ reconnect: true,
+ },
+ });
+
+ const splitLink = split(
+ ({ query }) => {
+ const definition = getMainDefinition(query);
+ return (
+ definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
+ );
+ },
+ wsLink,
+ httpLink
+ );
+
+ const client = new ApolloClient({
+ link: splitLink,
+ cache: new InMemoryCache(),
+ });
+
+ export function ApolloProviderWrapper({ children }) {
+ return {children};
+ }
+ ```
+
+ - Use subscriptions in your component:
+ ```javascript
+ // components/Time.js
+ import { useSubscription, gql } from '@apollo/client';
+
+ const TIME_SUBSCRIPTION = gql`
+ subscription {
+ time
+ }
+ `;
+
+ export default function Time() {
+ const { data, loading } = useSubscription(TIME_SUBSCRIPTION);
+
+ if (loading) return
Loading...
;
+
+ return
Current time: {data.time}
;
+ }
+ ```
+
+2. **Optimizing Caching with Apollo Client**:
+ - Configure cache policies in Apollo Client:
+ ```javascript
+ // lib/apolloClient.js
+ import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+
+ const client = new ApolloClient({
+ uri: '/api/graphql',
+ cache: new InMemoryCache({
+ typePolicies: {
+ Query: {
+ fields: {
+ hello: {
+ read(existing) {
+ return existing;
+ },
+ },
+ },
+ },
+ },
+ }),
+ });
+
+ export function ApolloProviderWrapper({ children }) {
+ return {children};
+ }
+ ```
+
+3. **Using Advanced GraphQL Features**:
+ - Utilize Apollo Client's built-in features for caching, pagination, optimistic UI updates, etc.
+ - Refer to Apollo Client documentation for detailed examples and advanced use cases: [Apollo Client Docs](https://www.apollographql.com/docs/react/)
\ No newline at end of file
diff --git a/courses/Next.Js/advance-level/_category_.json b/courses/Next.Js/advance-level/_category_.json
new file mode 100644
index 000000000..cd2d95485
--- /dev/null
+++ b/courses/Next.Js/advance-level/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Advanced Level",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn Next.Js Advance Techniques."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/Frameworks.md b/courses/Next.Js/beginner-level/Introduction/Frameworks.md
new file mode 100644
index 000000000..fd7bac29a
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Introduction/Frameworks.md
@@ -0,0 +1,22 @@
+---
+id: lesson-2
+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]
+---
+
+
+| **Feature** | **React** | **Next.js** | **Angular** | **Vue/Nuxt.js** |
+|--------------------|---------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
+| **Type** | Library for building UIs | Framework built on top of React providing SSR, SSG, and file-based routing | Full-fledged framework for building single-page applications | Vue: Progressive framework for building UIs Nuxt.js: Framework built on Vue providing SSR, SSG |
+| **Development** | Focuses on the view layer, requires additional libraries for routing, SSR | Simplifies development with out-of-the-box SSR, SSG, and file-based routing | Complete set of tools, more opinionated structure | Vue: Similar to React with component-based architecture Nuxt.js: Similar features to Next.js |
+| **Flexibility** | High, requires manual setup for routing, state management, SSR | High, but provides more out-of-the-box features, simplifying setup | Less flexibility, more opinionated | Vue: High flexibility Nuxt.js: Simplifies setup with out-of-the-box features |
+| **Language** | JavaScript | JavaScript | TypeScript (default) | Vue: JavaScript Nuxt.js: JavaScript |
+| **Server-Side Rendering (SSR)** | Requires additional setup | Built-in SSR | Possible, but not as straightforward | Built-in SSR with Nuxt.js |
+| **Static Site Generation (SSG)** | Requires additional setup | Built-in SSG | Possible, but not as straightforward | Built-in SSG with Nuxt.js |
+| **Routing** | Requires a library like React Router | File-based routing | Built-in | Vue: Requires Vue Router Nuxt.js: File-based routing |
+| **State Management** | Requires a library like Redux or Context API | Uses React state management, can integrate with libraries like Redux | Built-in with services and RxJS | Vue: Requires Vuex for state management Nuxt.js: Integrates with Vuex |
+| **Learning Curve** | Moderate, requires understanding of additional libraries | Lower compared to React alone, due to built-in features | Steeper learning curve due to more complex, opinionated framework | Vue: Moderate learning curve Nuxt.js: Lower compared to Vue alone, due to built-in features |
+
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/_category_.json b/courses/Next.Js/beginner-level/Introduction/_category_.json
new file mode 100644
index 000000000..713020a21
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Introduction/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Introduction",
+ "position": 1,
+ "link": {
+ "type": "generated-index",
+ "description": "Let's Start with Next.Js."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/introduction.md b/courses/Next.Js/beginner-level/Introduction/introduction.md
new file mode 100644
index 000000000..368caf8b1
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Introduction/introduction.md
@@ -0,0 +1,31 @@
+---
+id: lesson-1
+title: "Introduction to Next.js"
+sidebar_label: Introduction
+sidebar_position: 1
+description: "Introduction to Next.js"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+#### What is Next.js?
+
+**Next.js** is a React framework that enables server-side rendering and static site generation for React applications. Developed by Vercel, it aims to provide a seamless developer experience while enhancing performance, scalability, and SEO. Next.js builds on top of React and provides a number of additional features to improve the development process and application performance.
+
+:::note
+#### Benefits
+
+1. **Server-Side Rendering (SSR)**: Next.js enables server-side rendering, which allows pages to be pre-rendered on the server and sent to the client as fully rendered HTML. This improves initial load times and SEO.
+
+2. **Static Site Generation (SSG)**: Next.js can generate static HTML at build time for pages that don't need to be rendered on every request. This results in fast load times and efficient performance.
+
+3. **Automatic Code Splitting**: Next.js automatically splits code into smaller bundles that are loaded only when needed, optimizing page load times and performance.
+
+4. **API Routes**: Next.js allows you to create API endpoints within the same application, simplifying the process of building full-stack applications.
+
+5. **Optimized Performance**: With features like automatic static optimization, image optimization, and lazy loading, Next.js applications are highly performant.
+
+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.
+:::
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Introduction/settingUp.md b/courses/Next.Js/beginner-level/Introduction/settingUp.md
new file mode 100644
index 000000000..27efda2f0
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Introduction/settingUp.md
@@ -0,0 +1,39 @@
+---
+id: lesson-3
+title: "Setting Up the Development Environment"
+sidebar_label: Setup
+sidebar_position: 3
+description: "Setting Up the Development Environment"
+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
+ # or
+ yarn create next-app my-next-app
+ ```
+
+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
+ # or
+ yarn dev
+ ```
+ - Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see your Next.js application running.
+
+
+ 
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md b/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
new file mode 100644
index 000000000..4d267dcd7
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Pages-and-routing/FIlebase-Routing.md
@@ -0,0 +1,91 @@
+---
+id: lesson-2
+title: "Understanding the File-Based Routing System"
+sidebar_label: File-Based Routing System
+sidebar_position: 2
+description: "Understanding the File-Based Routing System"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+Next.js uses a file-based routing system, where the file structure inside the `src/pages` directory defines the routes of the application.
+
+1. **File and Folder Structure**:
+ - Each file in `src/pages` represents a unique route based on its name and path.
+ - Folders within `src/pages` can contain additional pages and create nested routes.
+
+2. **Example Structure**:
+ ```
+ src/pages/
+ ├── about.js // Maps to /about
+ ├── index.js // Maps to /
+ ├── blog/
+ │ ├── index.js // Maps to /blog
+ │ └── [id].js // Maps to /blog/:id
+ ├── contact.js // Maps to /contact
+ └── products/
+ ├── index.js // Maps to /products
+ └── [id].js // Maps to /products/:id
+ ```
+
+3. **Dynamic Routing**:
+ - Dynamic routes can be created using square brackets in the file name. For example, `[id].js` creates a dynamic route that matches any value in place of `id`:
+ ```javascript
+ // src/pages/blog/[id].js
+ import { useRouter } from 'next/router';
+
+ export default function BlogPost() {
+ const router = useRouter();
+ const { id } = router.query;
+
+ return
Blog Post {id}
;
+ }
+ ```
+ - This file will be accessible at URLs like `/blog/1`, `/blog/2`, etc., where `1` and `2` are dynamic parameters.
+
+#### Nested Routes
+
+Nested routes can be achieved by creating folders within the `src/pages` directory and adding files within those folders.
+
+1. **Nested Route Example**:
+ - Create a `products` directory inside `src/pages`:
+ ```
+ src/pages/products/
+ ├── index.js // Maps to /products
+ └── [id].js // Maps to /products/:id
+ ```
+
+2. **Nested Index Page**:
+ - The `index.js` file inside the `products` directory maps to the `/products` route:
+ ```javascript
+ // src/pages/products/index.js
+ export default function Products() {
+ return
Products Page
;
+ }
+ ```
+
+
+
Products Page
+
+
+
+
+3. **Nested Dynamic Route**:
+ - The `[id].js` file inside the `products` directory maps to dynamic routes like `/products/1`, `/products/2`, etc.:
+ ```javascript
+ // src/pages/products/[id].js
+ import { useRouter } from 'next/router';
+
+ export default function Product() {
+ const router = useRouter();
+ const { id } = router.query;
+
+ return
Product {id}
;
+ }
+ ```
+
+
+
Products 3
+
+
+
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/_category_.json b/courses/Next.Js/beginner-level/Pages-and-routing/_category_.json
new file mode 100644
index 000000000..cb7010da8
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Pages-and-routing/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Pages and Routing",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn to Routing."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md b/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
new file mode 100644
index 000000000..c6cb8567d
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Pages-and-routing/creating-pages.md
@@ -0,0 +1,45 @@
+---
+id: lesson-1
+title: "Pages and Routing in Next.js"
+sidebar_label: Pages and Routing
+sidebar_position: 1
+description: "Pages and Routing in Next.js"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+#### Creating Pages in Next.js
+
+In Next.js, pages are React components that are stored in the `src/pages` directory. Each file in this directory corresponds to a route in the application.
+
+1. **Basic Page Creation**:
+ - To create a new page, add a new file to the `src/pages` directory. For example, to create an "About" page, create `src/pages/about.js`:
+ ```javascript
+ // src/pages/about.js
+ export default function About() {
+ return
About Us
;
+ }
+ ```
+ - This file will be accessible at the `/about` URL.
+
+
+
+
About Us
+
+
+
+2. **Home Page**:
+ - The default home page is created by adding `index.js` to the `src/pages` directory:
+ ```javascript
+ // src/pages/index.js
+ export default function Home() {
+ return
Welcome to Our Site
;
+ }
+ ```
+ - This file will be accessible at the root URL `/`.
+
+
+
+
Welcome to Our Site
+
+
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Routes/Database.md b/courses/Next.Js/beginner-level/Routes/Database.md
new file mode 100644
index 000000000..12dc0c4ff
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Routes/Database.md
@@ -0,0 +1,140 @@
+---
+id: lesson-2
+title: "Connecting API Routes to a Database"
+sidebar_label: Database Connection
+sidebar_position: 2
+description: "Connecting API Routes to a Database"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+You can connect your API routes to a database using popular database libraries like `mongoose` for MongoDB or `prisma` for SQL databases. Below is an example using MongoDB and Mongoose.
+
+1. **Install Mongoose**:
+ ```bash
+ npm install mongoose
+ ```
+
+2. **Create a Database Connection Helper**:
+ - Create a `src/lib/dbConnect.js` file to manage the database connection:
+ ```javascript
+ // src/lib/dbConnect.js
+ import mongoose from 'mongoose';
+
+ const MONGODB_URI = process.env.MONGODB_URI;
+
+ if (!MONGODB_URI) {
+ throw new Error(
+ 'Please define the MONGODB_URI environment variable inside .env.local'
+ );
+ }
+
+ let cached = global.mongoose;
+
+ if (!cached) {
+ cached = global.mongoose = { conn: null, promise: null };
+ }
+
+ async function dbConnect() {
+ if (cached.conn) {
+ return cached.conn;
+ }
+
+ if (!cached.promise) {
+ const opts = {
+ useNewUrlParser: true,
+ useUnifiedTopology: true,
+ bufferCommands: false,
+ bufferMaxEntries: 0,
+ useFindAndModify: false,
+ useCreateIndex: true,
+ };
+
+ cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
+ return mongoose;
+ });
+ }
+ cached.conn = await cached.promise;
+ return cached.conn;
+ }
+
+ export default dbConnect;
+ ```
+
+3. **Create a Mongoose Model**:
+ - Create a `src/models/User.js` file for the User model:
+ ```javascript
+ // src/models/User.js
+ import mongoose from 'mongoose';
+
+ const UserSchema = new mongoose.Schema({
+ name: {
+ type: String,
+ required: [true, 'Please provide a name'],
+ },
+ email: {
+ type: String,
+ required: [true, 'Please provide an email'],
+ unique: true,
+ },
+ });
+
+ export default mongoose.models.User || mongoose.model('User', UserSchema);
+ ```
+
+4. **Use the Database in API Routes**:
+ - Update your API route to connect to the database and interact with the User model:
+ ```javascript
+ // src/pages/api/users.js
+ import dbConnect from '../../lib/dbConnect';
+ import User from '../../models/User';
+
+ export default async function handler(req, res) {
+ const { method } = req;
+
+ await dbConnect();
+
+ switch (method) {
+ case 'GET':
+ try {
+ const users = await User.find({});
+ res.status(200).json({ success: true, data: users });
+ } catch (error) {
+ res.status(400).json({ success: false, error });
+ }
+ break;
+ case 'POST':
+ try {
+ const user = await User.create(req.body);
+ res.status(201).json({ success: true, data: user });
+ } catch (error) {
+ res.status(400).json({ success: false, error });
+ }
+ break;
+ default:
+ res.setHeader('Allow', ['GET', 'POST']);
+ res.status(405).end(`Method ${method} Not Allowed`);
+ }
+ }
+ ```
+
+
+ Fetched user Details
+
+
+
+
No results Found
+
+
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Routes/Introduction.md b/courses/Next.Js/beginner-level/Routes/Introduction.md
new file mode 100644
index 000000000..9ad05ac3c
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Routes/Introduction.md
@@ -0,0 +1,48 @@
+---
+id: lesson-1
+title: "API Routes in Next.js"
+sidebar_label: API Routes
+sidebar_position: 1
+description: "API Routes in Next.js"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+Next.js provides a simple way to create API routes that you can use to handle backend logic, such as interacting with a database or performing server-side operations. These routes can be created within the `src/pages/api` directory.
+
+#### Creating API Routes in Next.js
+
+1. **Basic API Route**:
+ - Create a new file in the `src/pages/api` directory. For example, create `hello.js`:
+ ```javascript
+ // src/pages/api/hello.js
+ export default function handler(req, res) {
+ res.status(200).json({ message: 'Hello, world!' });
+ }
+ ```
+ - This API route will be accessible at `/api/hello`.
+
+2. **Handling API Requests**:
+ - API routes have access to the request (`req`) and response (`res`) objects, allowing you to handle different HTTP methods (GET, POST, PUT, DELETE, etc.).
+
+3. **Example with Multiple Methods**:
+ ```javascript
+ // src/pages/api/users.js
+ export default function handler(req, res) {
+ const { method } = req;
+
+ switch (method) {
+ case 'GET':
+ // Handle GET request
+ res.status(200).json({ message: 'GET request' });
+ break;
+ case 'POST':
+ // Handle POST request
+ const data = req.body;
+ res.status(201).json({ message: 'User created', data });
+ break;
+ default:
+ res.setHeader('Allow', ['GET', 'POST']);
+ res.status(405).end(`Method ${method} Not Allowed`);
+ }
+ }
+ ```
diff --git a/courses/Next.Js/beginner-level/Routes/_category_.json b/courses/Next.Js/beginner-level/Routes/_category_.json
new file mode 100644
index 000000000..8fb15c2a6
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Routes/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "API Routes",
+ "position": 6,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn Next.Js API Routes."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Started/Running-development.md b/courses/Next.Js/beginner-level/Started/Running-development.md
new file mode 100644
index 000000000..d46ffa81b
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Started/Running-development.md
@@ -0,0 +1,66 @@
+---
+id: lesson-2
+title: "Running the Development Server"
+sidebar_label: Development Server
+sidebar_position: 2
+description: "Learn Development Server"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+
+To run the development server and start your Next.js application:
+
+1. Navigate to the project directory:
+ ```bash
+ cd my-next-app
+ ```
+
+2. Start the development server:
+ ```bash
+ npm run dev
+ # or
+ yarn dev
+ ```
+
+3. Open your browser and navigate to [http://localhost:3000](http://localhost:3000). You should see your Next.js application running.
+
+#### Building and Deploying a Next.js App
+
+Next.js provides built-in commands to build and deploy your application.
+
+1. **Building the Application**:
+ - Run the following command to create an optimized production build:
+ ```bash
+ npm run build
+ # or
+ yarn build
+ ```
+ - This will generate a `.next` directory containing the compiled application.
+
+2. **Starting the Production Server**:
+ - After building the application, you can start the production server:
+ ```bash
+ npm start
+ # or
+ yarn start
+ ```
+
+ 
+
+3. **Deploying the Application**:
+ - **Vercel**: Vercel is the company behind Next.js and provides seamless integration for deploying Next.js applications.
+ - Install the Vercel CLI:
+ ```bash
+ npm install -g vercel
+ ```
+ - Deploy your application:
+ ```bash
+ vercel
+ ```
+ - Follow the prompts to link your project to a Vercel account and deploy it.
+
+ - **Other Hosting Providers**: Next.js can be deployed on various hosting providers like AWS, Azure, Google Cloud, and DigitalOcean.
+ - Deploy the `.next` directory along with your project files to your preferred hosting provider.
+ - Ensure the environment supports Node.js and configure the start command to `npm start` or `yarn start`.
+
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Started/_category_.json b/courses/Next.Js/beginner-level/Started/_category_.json
new file mode 100644
index 000000000..33c4c33a0
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Started/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Project Build & Deployment",
+ "position": 2,
+ "link": {
+ "type": "generated-index",
+ "description": "Project Build & Deployment."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Started/creating-project.md b/courses/Next.Js/beginner-level/Started/creating-project.md
new file mode 100644
index 000000000..44ed25dda
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Started/creating-project.md
@@ -0,0 +1,67 @@
+---
+id: lesson-1
+title: "Getting Started with Next.js"
+sidebar_label: Understanding Project
+sidebar_position: 1
+description: "Getting Started with Next.js"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+#### Creating a New Next.js Project
+
+To create a new Next.js project, you'll need to have Node.js and npm (or yarn) installed on your system. Follow these steps to set up your project:
+
+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
+ # or
+ yarn create next-app my-next-app
+ ```
+
+ - This command will prompt you to name your project and choose some initial configuration options. Once completed, it will generate a new Next.js project in a directory named `my-next-app`.
+
+#### Project Structure Overview
+
+A typical Next.js project has the following structure:
+
+```
+my-next-app/
+├── node_modules/
+├── public/
+│ ├── favicon.ico
+│ └── vercel.svg
+├── src/
+│ ├── pages/
+│ │ ├── api/
+│ │ │ └── hello.js
+│ │ ├── _app.js
+│ │ ├── _document.js
+│ │ └── index.js
+│ ├── styles/
+│ │ ├── globals.css
+│ │ └── Home.module.css
+│ └── components/
+│ └── [Your components here]
+├── .gitignore
+├── package.json
+├── README.md
+└── next.config.js
+```
+
+:::note
+**Key Directories and Files**:
+- **`public/`**: Contains static assets like images, fonts, and other files that you want to serve directly. Files in this directory are accessible from the root URL.
+- **`src/pages/`**: Each file in this directory automatically becomes a route. For example, `pages/index.js` maps to `/`, and `pages/about.js` maps to `/about`.
+ - **`_app.js`**: Customizes the default App component used by Next.js to initialize pages.
+ - **`_document.js`**: Customizes the default Document component, useful for augmenting the application's HTML and body tags.
+ - **`api/`**: Contains serverless functions that map to `/api/*` routes.
+- **`src/styles/`**: Contains CSS files to style your application.
+- **`src/components/`**: Contains React components used across your application.
+- **`next.config.js`**: Customizes the Next.js configuration.
+- **`package.json`**: Lists dependencies and scripts for your project.
+:::
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Styling/Libraries.md b/courses/Next.Js/beginner-level/Styling/Libraries.md
new file mode 100644
index 000000000..2e00f4ffb
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Styling/Libraries.md
@@ -0,0 +1,80 @@
+---
+id: lesson-2
+title: "Integrating with CSS-in-JS Libraries"
+sidebar_label: CSS with Libraries
+sidebar_position: 2
+description: "Integrating with CSS-in-JS Libraries"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+Next.js supports popular CSS-in-JS libraries like styled-components and emotion.
+
+**Using styled-components**:
+
+1. **Install styled-components and babel-plugin-styled-components**:
+ ```bash
+ npm install styled-components
+ npm install --save-dev babel-plugin-styled-components
+ ```
+
+2. **Create a `.babelrc` File**:
+ ```json
+ {
+ "presets": ["next/babel"],
+ "plugins": [["styled-components", { "ssr": true }]]
+ }
+ ```
+
+3. **Use styled-components in a Component**:
+ ```javascript
+ // src/pages/index.js
+ import styled from 'styled-components';
+
+ const Title = styled.h1`
+ color: #0070f3;
+ font-size: 4rem;
+ `;
+
+ export default function Home() {
+ return (
+
+ );
+ }
+ ```
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Styling/_category_.json b/courses/Next.Js/beginner-level/Styling/_category_.json
new file mode 100644
index 000000000..ee33dce5e
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Styling/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Styling in Next.js",
+ "position": 5,
+ "link": {
+ "type": "generated-index",
+ "description": "Styling in Next.js."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/Styling/css-styling.md b/courses/Next.Js/beginner-level/Styling/css-styling.md
new file mode 100644
index 000000000..b60e33ad3
--- /dev/null
+++ b/courses/Next.Js/beginner-level/Styling/css-styling.md
@@ -0,0 +1,104 @@
+---
+id: lesson-1
+title: "Styling in Next.js"
+sidebar_label: Styling
+sidebar_position: 1
+description: "Styling in Next.js"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+Next.js offers several ways to style your applications, including using plain CSS, CSS Modules, Styled JSX, and integrating with popular CSS-in-JS libraries like styled-components and emotion.
+
+#### Using CSS in Next.js
+
+You can use global CSS files in your Next.js application by importing them in your `src/pages/_app.js` file.
+
+1. **Create a Global CSS File**:
+ - Create a CSS file in the `src/styles` directory, e.g., `globals.css`:
+ ```css
+ /* src/styles/globals.css */
+ body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+ }
+ ```
+
+2. **Import the Global CSS File**:
+ - Import the CSS file in `src/pages/_app.js`:
+ ```javascript
+ // src/pages/_app.js
+ import '../styles/globals.css';
+
+ function MyApp({ Component, pageProps }) {
+ return ;
+ }
+
+ export default MyApp;
+ ```
+
+#### CSS Modules
+
+CSS Modules provide a way to scope CSS to a specific component, avoiding global namespace collisions.
+
+1. **Create a CSS Module File**:
+ - Create a CSS Module file, e.g., `Home.module.css`:
+ ```css
+ /* src/styles/Home.module.css */
+ .container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+
+ .title {
+ font-size: 4rem;
+ color: #0070f3;
+ }
+ ```
+
+2. **Import and Use the CSS Module in a Component**:
+ - Import and apply the styles in your component:
+ ```javascript
+ // src/pages/index.js
+ import styles from '../styles/Home.module.css';
+
+ export default function Home() {
+ return (
+
+
Welcome to Next.js!
+
+ );
+ }
+ ```
+
+#### Styled JSX
+
+Styled JSX is built into Next.js and allows you to write scoped CSS directly within your components.
+
+1. **Use Styled JSX in a Component**:
+ ```javascript
+ // src/pages/index.js
+ export default function Home() {
+ return (
+
+
Welcome to Next.js!
+
+
+ );
+ }
+ ```
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/_category_.json b/courses/Next.Js/beginner-level/_category_.json
new file mode 100644
index 000000000..38cbcaefb
--- /dev/null
+++ b/courses/Next.Js/beginner-level/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Begginer Level",
+ "position": 1,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn Next.Js Begginer Techniques."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/_category_.json b/courses/Next.Js/beginner-level/static-and-serverSide/_category_.json
new file mode 100644
index 000000000..24a4337b2
--- /dev/null
+++ b/courses/Next.Js/beginner-level/static-and-serverSide/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Static and Server-Side Rendering",
+ "position": 4,
+ "link": {
+ "type": "generated-index",
+ "description": "Learn Next.Js Static and Server-Side Rendering."
+ }
+ }
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/concept.md b/courses/Next.Js/beginner-level/static-and-serverSide/concept.md
new file mode 100644
index 000000000..ca18bb498
--- /dev/null
+++ b/courses/Next.Js/beginner-level/static-and-serverSide/concept.md
@@ -0,0 +1,170 @@
+---
+id: lesson-2
+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]
+---
+
+#### 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';
+
+ 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 post = await res.json();
+
+ return {
+ props: {
+ post,
+ },
+ };
+ }
+
+ export async function getStaticPaths() {
+ // Specify dynamic routes to pre-render based on data
+ const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+ const posts = await res.json();
+
+ const paths = posts.map(post => ({
+ params: { id: post.id.toString() },
+ }));
+
+ return {
+ paths,
+ fallback: false,
+ };
+ }
+
+ export default function Post({ post }) {
+ const router = useRouter();
+ if (router.isFallback) {
+ return
Loading...
;
+ }
+
+ return (
+
+
{post.title}
+
{post.body}
+
+ );
+ }
+ ```
+
+2. **Explanation**:
+ - `getStaticProps` fetches data at build time and passes it as props to the page component.
+ - `getStaticPaths` specifies the dynamic routes to be pre-rendered.
+ - `fallback: false` ensures that only the specified paths are generated at build time.
+
+#### Implementing Server-Side Rendering (`getServerSideProps`)
+
+`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 profile = await res.json();
+
+ return {
+ props: {
+ profile,
+ },
+ };
+ }
+
+ export default function Profile({ profile }) {
+ return (
+
+
{profile.name}
+
{profile.email}
+
+ );
+ }
+ ```
+
+
+
John
+
johnexample@gmail.com
+
+
+
+2. **Explanation**:
+ - `getServerSideProps` fetches data on each request and passes it as props to the page component.
+ - This method ensures that the page is always up-to-date with the latest data.
+
+#### Incremental Static Regeneration (ISR)
+
+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 post = await res.json();
+
+ return {
+ props: {
+ post,
+ },
+ revalidate: 10, // Revalidate the page every 10 seconds
+ };
+ }
+
+ export async function getStaticPaths() {
+ const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+ const posts = await res.json();
+
+ const paths = posts.map(post => ({
+ params: { id: post.id.toString() },
+ }));
+
+ return {
+ paths,
+ fallback: true,
+ };
+ }
+
+ export default function Post({ post }) {
+ const router = useRouter();
+ if (router.isFallback) {
+ return
Loading...
;
+ }
+
+ return (
+
+
{post.title}
+
{post.body}
+
+ );
+ }
+ ```
+
+
+ Loading...
+
+
+
+2. **Explanation**:
+ - `revalidate`: Specifies the number of seconds after which the page should be regenerated.
+ - With ISR, the page will be updated in the background after the specified time, providing fresh content without a full rebuild.
+
\ No newline at end of file
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md b/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
new file mode 100644
index 000000000..f6a1584b5
--- /dev/null
+++ b/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
@@ -0,0 +1,21 @@
+---
+id: lesson-1
+title: "Static and Server-Side Rendering in Next.js"
+sidebar_label: Static and Server-Side Rendering
+sidebar_position: 1
+description: "Static and Server-Side Rendering in Next.js"
+tags: [courses,beginner-level,FramWorks,Introduction]
+---
+
+
+#### Difference Between Static and Server-Side Rendering
+
+**Static Rendering (Static Site Generation - SSG)**:
+- **Pre-rendering**: Pages are generated at build time, and the HTML is created once and reused for each request.
+- **Performance**: Faster since the content is pre-rendered and served as static files.
+- **Use Cases**: Ideal for pages that do not require frequent updates, such as blogs, documentation, and marketing pages.
+
+**Server-Side Rendering (SSR)**:
+- **On-Demand Rendering**: Pages are generated on each request, fetching data and rendering HTML dynamically.
+- **Performance**: Slower compared to static rendering because the server must generate the HTML for each request.
+- **Use Cases**: Suitable for pages that require real-time data or frequent updates, such as dashboards, user profiles, and dynamic content.
From 6e7e52aa712f92237d3907ffb72352b76ae57b78 Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Sat, 20 Jul 2024 22:02:14 +0530
Subject: [PATCH 3/5] Update introduction.md
---
.../static-and-serverSide/introduction.md | 101 ++++++++++++++++++
1 file changed, 101 insertions(+)
diff --git a/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md b/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
index f6a1584b5..7cf4a6cef 100644
--- a/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
+++ b/courses/Next.Js/beginner-level/static-and-serverSide/introduction.md
@@ -19,3 +19,104 @@ tags: [courses,beginner-level,FramWorks,Introduction]
- **On-Demand Rendering**: Pages are generated on each request, fetching data and rendering HTML dynamically.
- **Performance**: Slower compared to static rendering because the server must generate the HTML for each request.
- **Use Cases**: Suitable for pages that require real-time data or frequent updates, such as dashboards, user profiles, and dynamic content.
+
+## 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 title="pages/posts/[id].js"
+ 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 post = await res.json();
+
+ return {
+ props: {
+ post,
+ },
+ };
+ }
+
+ export async function getStaticPaths() {
+ // Specify dynamic routes to pre-render based on data
+ const res = await fetch("https://jsonplaceholder.typicode.com/posts");
+ const posts = await res.json();
+
+ const paths = posts.map((post) => ({
+ params: { id: post.id.toString() },
+ }));
+
+ return {
+ paths,
+ fallback: false,
+ };
+ }
+
+ export default function Post({ post }) {
+ const router = useRouter();
+ if (router.isFallback) {
+ return
Loading...
;
+ }
+
+ return (
+
+
{post.title}
+
{post.body}
+
+ );
+ }
+ ```
+
+2. **Explanation**:
+
+ - `getStaticProps` fetches data at build time and passes it as props to the page component.
+ - `getStaticPaths` specifies the dynamic routes to be pre-rendered.
+ - `fallback: false` ensures that only the specified paths are generated at build time.
+ - `router.isFallback` checks if the page is in fallback mode and displays a loading indicator.
+ - The `Post` component displays the post title and body fetched from the API.
+
+## Implementing Server-Side Rendering (`getServerSideProps`)
+
+`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 title="pages/user/[id].js"
+ import { useRouter } from "next/router";
+
+ export async function getServerSideProps({ params }) {
+ // Fetch user data using the id from params
+ const res = await fetch(
+ `https://jsonplaceholder.typicode.com/users/${params.id}`,
+ );
+ const user = await res.json();
+
+ return {
+ props: {
+ user,
+ },
+ };
+ }
+
+ export default function User({ user }) {
+ return (
+
+
{user.name}
+
Email: {user.email}
+
+ );
+ }
+ ```
+
+2. **Explanation**:
+
+ - `getServerSideProps` fetches data on each request and passes it as props to the page component.
+ - The `User` component displays the user's name and email fetched from the API.
+
+In this lesson, you learned about static and server-side rendering in Next.js and how to implement them using `getStaticProps` and `getServerSideProps` functions. Static rendering is ideal for content that does not change frequently, while server-side rendering is suitable for real-time data and dynamic content.
From 5b8537b5bd83c0a1b8a6cf8b860f4014e798e6ea Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Sat, 20 Jul 2024 22:04:34 +0530
Subject: [PATCH 4/5] Update settingUp.md
---
.../beginner-level/Introduction/settingUp.md | 27 ++++++++++++++++++-
1 file changed, 26 insertions(+), 1 deletion(-)
diff --git a/courses/Next.Js/beginner-level/Introduction/settingUp.md b/courses/Next.Js/beginner-level/Introduction/settingUp.md
index 27efda2f0..fd92b0d68 100644
--- a/courses/Next.Js/beginner-level/Introduction/settingUp.md
+++ b/courses/Next.Js/beginner-level/Introduction/settingUp.md
@@ -36,4 +36,29 @@ To get started with Next.js, you'll need Node.js and npm (or yarn) installed on
- Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see your Next.js application running.
- 
\ No newline at end of file
+ 
+
+ 5. **Explore the Project Structure**:
+
+ - Next.js projects have the following structure:
+ ```
+ my-next-app/
+ ├── .next/ # Build output
+ ├── node_modules/ # Node.js modules
+ ├── pages/ # Pages and routes
+ ├── public/ # Static assets
+ ├── styles/ # Global styles
+ ├── .gitignore # Git ignore file
+ ├── package.json # Project metadata
+ ├── README.md # Project README
+ ```
+
+6. **Start Building Your Next.js Application**:
+
+ - You're now ready to start building your Next.js application. Explore the project structure, create new pages, and customize your application as needed.
+
+By following these steps, you can set up a development environment for building Next.js applications and start creating modern web experiences with ease. Happy coding!
+
+## Additional Resources:
+
+- [Next.js Documentation](https://nextjs.org/docs)
From 5ef723729202e7f58eab9ec87d41ec93d99886b3 Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Sat, 20 Jul 2024 22:06:18 +0530
Subject: [PATCH 5/5] Update introduction.md
---
.../Introduction/introduction.md | 39 ++++++++++++++++++-
1 file changed, 38 insertions(+), 1 deletion(-)
diff --git a/courses/Next.Js/beginner-level/Introduction/introduction.md b/courses/Next.Js/beginner-level/Introduction/introduction.md
index 368caf8b1..01fccdfbf 100644
--- a/courses/Next.Js/beginner-level/Introduction/introduction.md
+++ b/courses/Next.Js/beginner-level/Introduction/introduction.md
@@ -28,4 +28,41 @@ tags: [courses,beginner-level,FramWorks,Introduction]
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.
-:::
\ No newline at end of file
+:::
+
+
+## Why Learn Next.js?
+
+Learning Next.js offers several benefits for developers looking to build modern web applications:
+
+1. **Improved Performance**: Next.js provides server-side rendering and static site generation, resulting in faster load times and better SEO performance.
+2. **Enhanced SEO**: Pre-rendered pages in Next.js improve search engine optimization by providing search engines with fully rendered HTML content.
+3. **Simplified Development**: Next.js simplifies the development process by offering features like automatic code splitting, API routes, and built-in CSS support.
+4. **Scalability**: Next.js applications are highly scalable and can handle increased traffic and data requirements effectively.
+5. **Full-Stack Development**: Next.js allows developers to build full-stack applications by integrating API routes and server-side rendering with React components.
+6. **Community and Ecosystem**: Next.js has a vibrant community and ecosystem, with extensive documentation, tutorials, and plugins available to support developers.
+7. **Career Opportunities**: Learning Next.js can open up career opportunities as Next.js developers are in demand due to the framework's popularity and versatility.
+8. **Modern Web Development**: Next.js is a modern framework that incorporates the latest web development practices and tools, making it a valuable skill for developers.
+9. **Vercel Integration**: Next.js is developed by Vercel, which offers hosting and deployment services that seamlessly integrate with Next.js applications.
+10. **React Compatibility**: Next.js is built on top of React, making it a natural choice for developers familiar with React who want to enhance their applications with server-side rendering and static site generation.
+11. **Performance Monitoring**: Next.js provides built-in performance monitoring tools that help developers optimize their applications for speed and efficiency.
+12. **Incremental Static Regeneration**: Next.js supports incremental static regeneration, allowing developers to update static pages without requiring a full rebuild of the site.
+13. **Hybrid Static and Server-Side Rendering**: Next.js allows developers to combine static site generation with server-side rendering for optimal performance and flexibility.
+14. **TypeScript Support**: Next.js has built-in support for TypeScript, enabling developers to write type-safe code and improve code quality and maintainability.
+15. **Internationalization**: Next.js provides built-in support for internationalization, making it easy to create multilingual applications with localized content.
+16. **Authentication and Authorization**: Next.js offers solutions for implementing authentication and authorization in applications, ensuring secure access to resources and data.
+17. **Testing and Debugging**: Next.js provides tools and utilities for testing and debugging applications, helping developers ensure the quality and reliability of their code.
+18. **Continuous Integration and Deployment**: Next.js applications can be easily integrated with CI/CD pipelines for automated testing, building, and deployment processes.
+19. **Serverless Functions**: Next.js allows developers to create serverless functions that can be deployed alongside their applications, enabling server-side logic without managing servers.
+20. **Data Fetching Strategies**: Next.js supports various data fetching strategies, including `getStaticProps`, `getServerSideProps`, and `useSWR`, to fetch data at build time or on each request.
+21. **Error Handling**: Next.js provides error handling mechanisms that help developers identify and resolve issues in their applications, ensuring a smooth user experience.
+22. **Optimized Image Loading**: Next.js offers optimized image loading techniques, such as automatic image optimization and lazy loading, to improve performance and reduce bandwidth usage.
+23. **SEO Metadata**: Next.js allows developers to define SEO metadata for pages, including titles, descriptions, and Open Graph tags, to enhance search engine visibility and social sharing.
+24. **Accessibility**: Next.js promotes accessibility best practices by providing tools and guidelines for creating inclusive web applications that are usable by all users.
+25. **Documentation and Support**: Next.js has comprehensive documentation and community support, making it easy for developers to learn and troubleshoot issues while building applications.
+
+By learning Next.js, developers can leverage these features and benefits to create high-performance, scalable, and modern web applications that meet the demands of today's digital landscape.
+
+## 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.