React & Next Js

Master NextJs web development with our comprehensive training course! Learn from industry experts, enhance your coding skills, and build robust applications. Perfect for beginners and experienced developers aiming to excel.

  • Duration: 3 months
  • Delivery Type: Delivery Type: Online/2hrs/3 classes a week
  • Weekdays: To be communicated
  • Time: 9am - 11am (WAT) or 1am - 3am
PRACTICAL AND JOB-READY NEXT JS MODULES

Modules Covered

React

View topics
bg

Next JS

View topics
bg

Prisma

View topics
bg
MODULE 1

Next JS

Introduction to Next.js

  • Introduction to Server-Side Rendering (SSR)
  • Advantages of using Next.js
  • Setting up a Next.js Project
  • Next.js Project Structure
  • Creating and Running a Basic Next.js Application

Pages and Routing

  • File-based Routing System
  • Dynamic Routing
  • Nested Routes
  • Linking between Pages
  • Custom Routes and Route Parameters

Server-Side Rendering (SSR)

  • Introduction to SSR
  • getServerSideProps
  • Implementing SSR in Next.js
  • Performance Optimization in SSR
  • Case Studies

API Routes

  • Creating API Routes
  • Dynamic API Routes
  • Handling Requests and Responses
  • Middleware in API Routes
  • Integrating with External APIs

Data Fetching and State Management

  • Data Fetching Methods in Next.js
  • Client-side Data Fetching
  • State Management with React Context
  • Using Redux with Next.js
  • Server-side State Management

Styling in Next.js

  • Built-in CSS and Sass Support
  • CSS-in-JS with styled-components
  • Tailwind CSS Integration
  • Global Styles and CSS Modules
  • Best Practices for Styling in Next.js

Authentication and Authorization

  • Introduction to Authentication in Next.js
  • Implementing JWT Authentication
  • Using NextAuth.js for Authentication
  • Protecting Routes and API Endpoints
  • Role-based Access Control

Performance Optimization

  • Optimizing Performance in Next.js Applications
  • Code Splitting and Lazy Loading
  • Image Optimization with next/image
  • Caching Strategies
  • Monitoring and Analyzing Performance

Deployment and Best Practices

  • Deployment Options for Next.js
  • Vercel Deployment
  • Deploying to AWS, Azure, and Other Cloud Platforms
  • Continuous Integration and Continuous Deployment (CI/CD)
  • Best Practices and Next Steps
MODULE 2

React Js

Getting Started With React

  • What is React?
  • History of React
  • Advantages of using React
  • Setting Up the Development Environment
  • Installing Node.js and npm
  • Setting up a React project with Create React App
  • Understanding the project structure
  • JavaScript ES6+ for React
  • let, const, and var
  • Arrow functions
  • Template literals
  • Destructuring
  • Spread and Rest operators
  • Modules and Imports

React Core Concepts

  • JSX - JavaScript XML
  • What is JSX?
  • Embedding expressions in JSX
  • JSX and React components
  • Components
  • Functional Components
  • Class Components
  • Component lifecycle (class components)
  • Stateless vs Stateful Components
  • Props and State
  • Understanding Props
  • Passing data through Props
  • Understanding State
  • Managing State in Class and Functional Components
  • Event Handling
  • Handling events in React
  • Synthetic Events
  • Binding event handlers
  • Passing arguments to event handlers

Advanced React Concepts

  • React Hooks
  • Introducing Hooks
  • useState
  • useEffect
  • Custom Hooks
  • Other hooks (useReducer, useContext)
  • React Context API
  • Context creation
  • Provider and Consumer
  • useContext hook
  • React Router
  • Setting up React Router
  • Route, Link, and BrowserRouter
  • Dynamic Routing
  • Nested Routes
  • State Management
  • Lifting State Up
  • Context API for state management
  • Redux
  • Redux Toolkit

Styling and Component Libraries

  • Styling in React
  • CSS and Inline styles
  • CSS Modules
  • Styled Components
  • UI Component Libraries
  • Introduction to Material-UI
  • Using Ant Design
  • Bootstrap with React

Building and Deploying React Applications

  • Forms and Form Handling
  • Controlled vs Uncontrolled components
  • Handling form submissions
  • Form validation
  • Fetching Data
  • Fetch API
  • Axios
  • Handling Promises
  • Async/Await
  • Performance Optimization
  • React Performance Tools
  • Code splitting
  • Lazy Loading
  • Memoization (React.memo, useMemo, useCallback)

Testing in React

  • Testing in React
  • Introduction to Jest
  • Testing Library (React Testing Library)
  • Snapshot testing
  • Unit and Integration testing
  • Deploying React Applications
  • Building for production
  • Deployment options (Netlify, Vercel, GitHub Pages, Heroku)
  • Continuous Integration/Continuous Deployment (CI/CD)
MODULE 3

Prisma ORM

Getting Started With Prisma

  • Introduction to Prisma
  • Overview of Prisma
  • What is Prisma?
  • Key features and benefits
  • Prisma vs traditional ORMs
  • Use cases and real-world applications
  • Installation and setup
  • Installing Prisma CLI
  • Setting up a new Prisma project
  • Session 2: Prisma Schema and Data Modeling
  • Understanding the Prisma schema
  • Data model definition
  • Scalars and types
  • Creating your first data model
  • Migrations
  • Introduction to Prisma Migrate
  • Creating and running migrations
  • Hands-on practice: Creating and migrating a simple database schema

CRUD Operations and Querying

  • Basic CRUD Operations
  • Introduction to Prisma Client
  • Connecting to the database
  • Performing basic CRUD operations
  • Create
  • Read
  • Update
  • Delete
  • Handling errors and validation
  • Session 4: Advanced Querying and Filtering
  • Advanced querying techniques
  • Filtering
  • Sorting
  • Pagination
  • Relational queries
  • One-to-one relationships
  • One-to-many relationships
  • Many-to-many relationships
  • Hands-on practice: Implementing complex queries

Advanced Topics and Best Practices

  • Session 7: Prisma in Production
  • Database performance optimization
  • Connection pooling
  • Database transactions
  • Monitoring and logging
  • Error handling in production
  • Session 8: Prisma Best Practices and Advanced Features
  • Best practices for schema design and migrations
  • Using Prisma with TypeScript
  • Advanced Prisma features
  • Prisma Middleware
  • Prisma Studio
  • Testing with Prisma
  • Case studies and real-world examples
  • Q&A and wrap-up

Course Fees

NextJs Web Development

Covers every aspect of NextJs web development modules

N500, 000

500USD

3 Months

Enroll Now

Web Development + DevOps

Covers every aspect of NextJs Web Development + DevOps

N1000, 000

1200USD

6 Months

Enroll Now

Frequently Asked Question

Q1. Why should I take your training?


Q2. How can I start?


Q3.Is the training practical and suitable for beginners?


Q4. Can I participate in the training programs remotely?


Q5. Is it necessary to bring my own laptop for the training?


Q6. Can working-class people take the training?


Q7. Is there installmental payment?


Q8. Will I receive a certificate after the training?


Q9. Do you provide support after the training?


Q10. Can I expect immediate job placement upon completing the training?