Next.

js with TypeScript: Technical

Interview Preparation Guide
This comprehensive guide provides detailed notes on [Link] with TypeScript,
optimized for technical interview preparation. It covers fundamental concepts,
advanced topics, best practices, and includes a complete web development syllabus
for a holistic understanding.

What is [Link]?

[Link] is an open-source React framework that enables developers to build server-

rendered and statically generated web applications. Built on top of React, it provides a
structured approach to building production-ready applications with features like file-
system routing, API routes, and various rendering optimizations.

Why use [Link] over React?

While React is a JavaScript library for building user interfaces, [Link] extends React's
capabilities by offering a full-fledged framework with built-in features that address
common challenges in web development. Key advantages of [Link] include:

Server-Side Rendering (SSR) and Static Site Generation (SSG): [Link]

provides out-of-the-box support for SSR and SSG, which significantly improves
initial page load performance and SEO compared to client-side rendered (CSR)
React applications.

File-system Routing: [Link] simplifies routing by automatically creating routes

based on the file structure in the pages or app directory, eliminating the need
for manual route configuration.

API Routes: It allows you to create backend API endpoints directly within your
[Link] project, enabling full-stack development within a single codebase.

Image Optimization: Built-in image optimization with the next/image

component automatically optimizes images for different screen sizes and
formats, improving performance.
 Code Splitting and Bundling: [Link] automatically handles code splitting,
ensuring that only the necessary JavaScript is loaded for each page, leading to
faster page loads.

TypeScript Support: Excellent built-in support for TypeScript, providing type

safety and improved developer experience.

SEO Friendliness: Due to SSR and SSG, [Link] applications are inherently more
SEO-friendly as content is rendered on the server and available to search engine
crawlers.

Performance: Various optimizations like automatic code splitting, image

optimization, and pre-fetching contribute to better overall application
performance.

2. [Link] Architecture & Rendering Strategies

[Link] Architecture

[Link] applications are typically structured around the pages or app directory
(depending on the router used). Each file in these directories becomes a route. The
core architecture revolves around:

Pages/App Directory: Defines the routes and serves as the entry point for
pages/components.

API Routes: Files within pages/api or app/api (for App Router) become API
endpoints.

Public Directory: For static assets like images, fonts, etc.

Components: Reusable React components.

Rendering Strategies

[Link] offers several rendering strategies to optimize performance and user

experience:

Server-Side Rendering (SSR):

How it works: For each request, the HTML is generated on the server and
sent to the client. This means the page is always up-to-date.
 Use cases: Pages with frequently changing data, personalized content, or
strong SEO requirements.

Data fetching: getServerSideProps (Pages Router) or fetch in Server

Components (App Router).

Static Site Generation (SSG):

How it works: The HTML is generated at build time and reused for each
request. This is highly performant as pages are served from a CDN.

Use cases: Marketing pages, blog posts, documentation, or any content

that doesn't change frequently.

Data fetching: getStaticProps (Pages Router).

Incremental Static Regeneration (ISR):

How it works: A hybrid approach where pages are initially generated at

build time (like SSG) but can be re-generated in the background after a
specified time interval or on demand, without requiring a full redeploy.

Use cases: Content that updates periodically, like news articles or product
listings.

Data fetching: getStaticProps with revalidate option (Pages Router).

Client-Side Rendering (CSR):

How it works: The initial HTML sent from the server is minimal, and the
browser renders the content using JavaScript after fetching data from an
API. This is how traditional React applications work.

Use cases: Dashboards, user-specific content, or parts of a page that don't

require SEO.

Data fetching: useEffect hook in React components.

3. TypeScript Integration in [Link] Projects

[Link] has excellent built-in support for TypeScript. To integrate TypeScript into a new
[Link] project, simply create a [Link] file in the root of your project, and
[Link] will automatically configure it. For existing projects, you can add TypeScript by
installing the necessary dependencies:

npm install --save-dev typescript @types/react @types/node

# or
yarn add --dev typescript @types/react @types/node

Once configured, you can use .ts or .tsx extensions for your files, and [Link] will
transpile them. TypeScript provides type safety, autocompletion, and helps catch
errors during development, leading to more robust and maintainable code.

4. Important Concepts with Examples

File-based Routing & Dynamic Routes

[Link] uses a file-system based router. Pages are React components exported from
.js , .jsx , .ts , or .tsx files in the pages directory (or app directory for App
Router).

Basic Routing:

pages/[Link] -> /

pages/[Link] -> /about

pages/posts/[Link] -> /posts

Nested Routing:

pages/dashboard/[Link] -> /dashboard/settings

Dynamic Routes:

To create dynamic routes, use square brackets [] in the file name.

pages/posts/[id].tsx will match /posts/1 , /posts/abc , etc. The id

parameter will be available in [Link] .

```typescript // pages/posts/[id].tsx import { useRouter } from 'next/router';

const PostDetail = () => { const router = useRouter(); const { id } = [Link];

 return (

Post ID: {id}

This is the detail page for post {id}.

); };

export default PostDetail; ```

Catch-all Routes: Use [...param] to catch all subsequent path segments.

pages/docs/[...slug].tsx will match /docs/a , /docs/a/b ,

/docs/a/b/c . The slug parameter will be an array.

```typescript // pages/docs/[...slug].tsx import { useRouter } from 'next/router';

const DocPage = () => { const router = useRouter(); const { slug } = [Link];

return (

Documentation Page
Path: {[Link](slug) ? [Link]('/') : slug}

); };

export default DocPage; ```

API Routes

API Routes allow you to create API endpoints as part of your [Link] application. They
reside in the pages/api directory (or app/api for App Router) and are server-side
only.
 // pages/api/[Link]
import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
name: string;
};

export default function handler(

req: NextApiRequest,
res: NextApiResponse<Data>
) {
[Link](200).json({ name: 'John Doe' });
}

Dynamic API Routes: Similar to dynamic pages, you can create dynamic API
routes using [param] .

```typescript // pages/api/users/[id].ts import type { NextApiRequest,

NextApiResponse } from 'next';

type User = { id: string; name: string; };

export default function handler( req: NextApiRequest, res: NextApiResponse ) { const {

id } = [Link];

if ([Link] === 'GET') { // In a real application, you would fetch user data from a
database if (id === '1') { [Link](200).json({ id: '1', name: 'Alice' }); } else {
[Link](404).json({ message: 'User not found' }); } } else { [Link]('Allow',
['GET']); [Link](405).end( Method ${[Link]} Not Allowed ); } } ```

Middleware

[Link] Middleware allows you to run code before a request is completed. It's ideal for
authentication, A/B testing, internationalization, and more. Middleware files are
typically named [Link] (or [Link] ) and are placed at the root of
your project or within the src directory.
 // [Link]
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {

const isAuthenticated = true; // Replace with actual authentication logic

if (!isAuthenticated && [Link]('/dashboard')) {

return [Link](new URL('/login', [Link]));
}

return [Link]();
}

export const config = {

matcher: ['/dashboard/:path*'], // Apply middleware to /dashboard and its
sub-paths
};

Data Fetching (Pages Router)

[Link] provides several methods for data fetching in the Pages Router, enabling
different rendering strategies.

getServerSideProps (SSR):

Fetches data on each request, on the server-side.

The data is then passed as props to the page component.

Ensures the page is always up-to-date.

```typescript // pages/products/[id].tsx import type { GetServerSideProps,

NextPage } from 'next';

interface Product { id: string; name: string; price: number; }

interface ProductPageProps { product: Product; }

const ProductPage: NextPage = ({ product }) => { return (

{[Link]}
Price: ${[Link]}

); };
export const getServerSideProps: GetServerSideProps = async (context) => {
const { id } = [Link]; // Simulate fetching data from an API const res =
await fetch( [Link] ); const product:
Product = await [Link]();

if (!product) { return { notFound: true, // Redirect to 404 page if product not found
}; }

return { props: { product, }, }; };

export default ProductPage; ```

getStaticProps (SSG & ISR):

Fetches data at build time.

The data is then passed as props to the page component.

Can be used with revalidate for ISR.

```typescript // pages/blog/[slug].tsx import type { GetStaticProps,

GetStaticPaths, NextPage } from 'next';

interface Post { slug: string; title: string; content: string; }

interface PostPageProps { post: Post; }

const PostPage: NextPage = ({ post }) => { return (

{[Link]}
{[Link]}

); };

export const getStaticPaths: GetStaticPaths = async () => { // Simulate fetching all

possible post slugs const res = await
fetch('[Link] const slugs: string[] = await
[Link]();

const paths = [Link]((slug) => ({ params: { slug }, }));

return { paths, fallback: 'blocking', // or true, or false }; };

export const getStaticProps: GetStaticProps = async (context) => { const { slug } =

[Link]!; // Simulate fetching data for a specific post const res = await
fetch( [Link] ); const post: Post = await
[Link]();

if (!post) { return { notFound: true, }; }

return { props: { post, }, revalidate: 60, // Re-generate page every 60 seconds (ISR)
}; };

export default PostPage; ```

getStaticPaths (SSG for Dynamic Routes):

Used with getStaticProps for dynamic routes to define which paths

should be pre-rendered at build time.

Returns an array of paths and a fallback option.

typescript // Example included in getStaticProps above.

Server Actions (App Router):

A new feature in the App Router that allows you to define server-side
functions directly within your React components.

These actions can be called from client components and execute securely
on the server.

They simplify data mutations and form submissions.

```typescript // app/[Link] (Server Component) import { addTodo } from

'@/lib/actions';

export default function AddTodo() { return (

Add Todo
); }

// lib/[Link] (Server Action) 'use server';

import { revalidatePath } from 'next/cache';

 export async function addTodo(formData: FormData) { const todo =
[Link]('todo'); // Save todo to database [Link]('Adding todo:', todo);
revalidatePath('/todos'); // Revalidate the /todos page after adding a todo } ```

App Router vs Pages Router

[Link] 13 introduced the App Router, a new routing and data fetching paradigm built
on React Server Components, alongside the existing Pages Router.

Feature Pages Router App Router

Directory pages/ app/

getServerSideProps , fetch (extended), Server

Data Fetching getStaticProps , getStaticPaths , Components, Server Actions,

getInitialProps use hook

Default to Server Components

Primarily client-side hydration with
Rendering (SSR/SSG), opt-in Client
optional SSR/SSG
Components

[Link] files for nested

Layouts Custom _app.js , _document.js
layouts

Loading [Link] for automatic

Manual
States loading UI

Error [Link] for automatic error

Custom _error.js
Handling boundaries

[Link] at root (same as

Middleware [Link] at root
Pages Router)

API Routes pages/api app/api (route handlers)

Better performance, simpler data

Mature, large community, familiar for
Advantages fetching, built-in layouts, React
React devs
18 features

Can lead to larger client bundles, less Newer, learning curve, still
Disadvantages
flexible data fetching evolving
Server vs Client Components

React Server Components (RSCs) are a new paradigm introduced in React 18 and
adopted by [Link] App Router. They allow you to render components on the server,
reducing the amount of JavaScript sent to the client.

Feature Server Components Client Components

Execution Server-side only Client-side (browser)

No interactivity (no useState , Full interactivity with hooks and

Interactivity
useEffect , event handlers) event listeners

| Data Fetching | Direct access to backend resources (e.g., databases, file system) |
Fetches data from the client (e.g., using fetch in useEffect ) | | File Size | Zero
impact on client-side bundle size | Adds to the client-side bundle size | | Use Cases |
Fetching data, accessing backend resources, rendering static content | Interactive UI,
using browser-only APIs, state management | | How to use | Default in App Router |
Add 'use client'; directive at the top of the file |

5. Best Practices

Project Structure in TypeScript

A well-organized project structure is crucial for maintainability and scalability. Here is

a recommended structure for a [Link] project with TypeScript:
 my-next-app/
├── .vscode/ # VSCode settings
├── .next/ # [Link] build output
├── node_modules/ # Project dependencies
├── public/ # Static assets (images, fonts, etc.)
│ ├── images/
│ └── fonts/
├── src/ # Source code
│ ├── app/ # App Router
│ │ ├── (auth)/ # Route group for authentication pages
│ │ │ ├── login/
│ │ │ │ └── [Link]
│ │ │ └── register/
│ │ │ └── [Link]
│ │ ├── api/ # API routes
│ │ │ └── hello/
│ │ │ └── [Link]
│ │ ├── dashboard/ # Dashboard pages
│ │ │ ├── [Link]
│ │ │ └── [Link]
│ │ ├── [Link] # Root layout
│ │ └── [Link] # Root page
│ ├── components/ # Reusable components
│ │ ├── ui/ # UI components (buttons, inputs, etc.)
│ │ └── common/ # Common components (Header, Footer, etc.)
│ ├── lib/ # Libraries and helper functions
│ │ ├── [Link] # Server Actions
│ │ ├── [Link] # API client
│ │ └── [Link] # Utility functions
│ ├── styles/ # Global styles
│ │ └── [Link]
│ └── types/ # TypeScript type definitions
│ └── [Link]
├── .[Link] # Environment variables (local)
├── .[Link] # ESLint configuration
├── .gitignore # Git ignore file
├── [Link] # [Link] configuration
├── [Link] # Project metadata and dependencies
├── [Link] # TypeScript configuration
└── [Link] # Project documentation

Type Safety

TypeScript enhances type safety in [Link] projects. Here are some best practices:

Props: Always define types for component props.

```typescript // components/ui/[Link] import React from 'react';

interface ButtonProps { children: [Link]; onClick: () => void; variant?:

'primary' | 'secondary'; }

const Button: [Link] = ({ children, onClick, variant = 'primary' }) => { return (

btn btn-${variant}} onClick={onClick}> {children} ); };
 export default Button; ```

API Responses: Define types for API responses to ensure consistency between
the frontend and backend.

typescript // types/[Link] export interface User { id: string;

name: string; email: string; }

NextApiRequest and NextApiResponse : Use the generic types provided by

[Link] for API routes to type the response body.

```typescript // pages/api/[Link] import type { NextApiRequest,

NextApiResponse } from 'next'; import type { User } from '@/types';

export default function handler( req: NextApiRequest, res: NextApiResponse ) { if

([Link] === 'GET') { const users: User[] = [ { id: '1', name: 'Alice', email:
'alice@[Link]' }, { id: '2', name: 'Bob', email: 'bob@[Link]' }, ];
[Link](200).json(users); } else { [Link]('Allow', ['GET']);
[Link](405).json({ message: Method ${[Link]} Not Allowed }); } } ```

Error Handling & Edge Cases

Robust error handling is essential for a good user experience.

App Router: Use [Link] files to create error boundaries for specific parts of
your application.

```typescript // app/dashboard/[Link] 'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
useEffect(() => { [Link](error); }, [error]);

return (

Something went wrong!

reset()}>Try again
); } ```
 Pages Router: Use a custom _error.js file to handle errors globally.

Data Fetching: Always handle potential errors in data fetching functions

( getServerSideProps , getStaticProps , fetch ) and provide appropriate
feedback to the user (e.g., showing a not found page or an error message).

Performance Optimization

Code Splitting: [Link] automatically splits code by page, but you can further
optimize by using dynamic imports for large components that are not
immediately needed.

```typescript import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() =>

import('../components/HeavyComponent'));

function MyPage() { return (

This is my page.

); } ```

Caching: Utilize [Link] caching strategies (SSG, ISR) to serve pages from a CDN.
For client-side data fetching, use libraries like SWR or React Query for caching
and revalidation.

Image Optimization: Always use the next/image component for images to get
automatic optimization, resizing, and modern format conversion.

6. Advanced Topics

Authentication & Authorization

[Link]: A complete open-source authentication solution for [Link]

applications. It simplifies adding authentication with various providers (OAuth,
email, credentials) and handles session management, JWTs, and more.

```typescript // pages/api/auth/[...nextauth].ts import NextAuth from 'next-

auth'; import CredentialsProvider from 'next-auth/providers/credentials';
 export default NextAuth({ providers: [ CredentialsProvider({ name: 'Credentials',
credentials: { username: { label: 'Username', type: 'text' }, password: { label:
'Password', type: 'password' }, }, async authorize(credentials, req) { // Add your
own authentication logic here const user = { id: '1', name: 'J Smith', email:
'jsmith@[Link]' };

if (user) {
return user;
} else {
return null;
}
},
}),

], session: { strategy: 'jwt', }, }); ```

JWT (JSON Web Tokens): A common way to handle authentication and

authorization in stateless applications. The server generates a JWT upon
successful login, and the client sends it with each subsequent request to access
protected resources.

State Management Approaches

Context API: React's built-in state management solution. It's suitable for simple
to moderately complex state that needs to be shared across multiple
components.

Redux: A predictable state container for JavaScript apps. It's powerful for
managing complex global state but comes with more boilerplate.

Zustand: A small, fast, and scalable state management solution. It's often
considered a simpler alternative to Redux, with a more modern API.

Edge Functions & Serverless Deployment

Edge Functions: Small, fast functions that run on a global network of servers
(the "edge"), close to the user. They are ideal for tasks that require low latency,
such as personalization, A/B testing, and authentication. [Link] Middleware runs
on the edge.

Serverless Deployment: Deploying applications without managing servers.

Platforms like Vercel and Netlify provide seamless serverless deployment for
[Link] applications, with automatic scaling, global CDN, and other benefits.
7. Interview-focused Q&A

Common [Link] Interview Questions

Q: What is the difference between SSR and SSG?

A: SSR generates the HTML on the server for each request, while SSG
generates it at build time. SSR is for dynamic data, and SSG is for static
content.

Q: When would you use getServerSideProps vs. getStaticProps ?

A: Use getServerSideProps for pages that need to be rendered with fresh
data on every request (e.g., a user dashboard). Use getStaticProps for
pages that can be pre-rendered at build time (e.g., a blog post).

Q: What is the purpose of the fallback property in getStaticPaths ?

A: It controls how [Link] handles paths that are not pre-rendered at build
time. false returns a 404, true serves a fallback page and then generates
the page in the background, and blocking server-renders the page on the
first request.

Q: How does [Link] optimize images?

A: The next/image component automatically resizes, optimizes, and
serves images in modern formats like WebP. It also prevents layout shift by
providing placeholders.

Q: What are the benefits of using the App Router over the Pages Router?
A: The App Router offers better performance through Server Components,
simpler data fetching with fetch , built-in layouts, and improved loading
and error handling.

Real-world Scenario-based Questions

Q: You are building an e-commerce site. How would you structure the
product detail page?
A: I would use getStaticPaths to pre-render the most popular products at
build time and getStaticProps with ISR ( revalidate ) to keep the
product information up-to-date. For less popular products, I would use
fallback: 'blocking' to server-render them on the first request.
 Q: How would you implement authentication for a web application that has
both a public-facing marketing site and a protected user dashboard?
A: I would use [Link] for authentication. The marketing site would be
built with SSG for performance. For the dashboard, I would use Middleware
to check for an authenticated session and redirect unauthenticated users to
the login page. The dashboard pages themselves would be rendered on the
server or client, depending on the data requirements.

This concludes the [Link] with TypeScript interview preparation guide. The following
sections provide a comprehensive web development syllabus for a deeper
understanding of the underlying technologies.

Full Stack Web Development Syllabus

Week - 1: Basic Javascript, Async and Promises

JavaScript Foundation

Basics: Variables, data types, operators, control flow (if/else, switch), loops (for,
while, do-while).

Functions: Function declaration, expression, arrow functions, parameters, return

values, scope.

Objects and Arrays: Object literals, properties, methods, array methods (map,
filter, reduce, etc.).

JavaScript APIs

DOM Manipulation: getElementById , querySelector , createElement ,

appendChild , event listeners.

Fetch API: Making network requests to get data from servers.

Local Storage: Storing data in the browser.

Async, JS architecture, promises & async await

Event Loop: Understanding how JavaScript handles asynchronous operations.

 Callbacks: The traditional way of handling asynchronous code.

Promises: A more modern way to handle asynchronous code, with then ,

catch , and finally .

Async/Await: Syntactic sugar on top of Promises, making asynchronous code

look synchronous.

Week - 2: [Link], Express, Bash, Git

[Link] and its runtime

What is [Link]? A JavaScript runtime built on Chrome's V8 engine.

Event-driven, non-blocking I/O: The core architecture of [Link].

Modules: require , [Link] , built-in modules ( fs , http , path ).

Express & [Link]

Express: A minimal and flexible [Link] web application framework.

Routing: Handling different HTTP requests (GET, POST, etc.).

Middleware: Functions that have access to the request and response objects.

Bash and Terminal

Basic commands: ls , cd , mkdir , rm , cp , mv .

Piping and redirection: | , > , >> .

Scripting: Writing simple shell scripts to automate tasks.

Git and GitHub

Version control: Tracking changes in your code.

Basic commands: git clone , git add , git commit , git push , git pull .

Branching and merging: git branch , git checkout , git merge .

GitHub: A platform for hosting Git repositories and collaborating with others.
Week - 3: Databases, JWT, Middleware

Databases (NoSQL/SQL)

SQL: Relational databases (e.g., PostgreSQL, MySQL). Schemas, tables, rows,

columns, joins.

NoSQL: Non-relational databases (e.g., MongoDB). Documents, collections,

flexible schema.

Mongo and Postgres deep dive

MongoDB: CRUD operations, indexing, aggregation framework.

PostgreSQL: Data types, constraints, transactions, advanced queries.

Middlewares, zod and Global Catches

Express Middleware: Writing custom middleware for logging, authentication,

etc.

Zod: A TypeScript-first schema declaration and validation library.

Global Error Handling: A centralized way to catch and handle errors in your
application.

JWT and Auth Recap

JWT (JSON Web Tokens): A standard for creating access tokens that assert some
number of claims.

Authentication: Verifying the identity of a user.

Authorization: Determining what an authenticated user is allowed to do.

DOM Introduction

What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It
represents the page so that programs can change the document structure, style, and
content. The DOM represents the document as a tree of objects, where each object
corresponds to a part of the document (e.g., an element, an attribute, or text).
JavaScript can be used to manipulate the DOM, allowing for dynamic and interactive
web pages.

Key DOM Concepts:

Nodes: Everything in an HTML document is a node. The entire document is a

document node, every HTML element is an element node, the text inside HTML
elements are text nodes, every HTML attribute is an attribute node, and
comments are comment nodes.

Tree Structure: The DOM represents the document as a hierarchical tree of

nodes. The <html> element is the root node, and all other nodes are
descendants.

Accessing the DOM: You can use JavaScript to access and manipulate the DOM
using methods like getElementById , getElementsByTagName , querySelector ,
and querySelectorAll .

Manipulating the DOM: You can create, add, remove, and modify HTML
elements and their attributes using JavaScript.

Example: DOM Manipulation

<!-- HTML -->

<div id="main">
<p class="content">This is a paragraph.</p>
</div>
<button id="myButton">Click Me</button>

// JavaScript
const mainDiv = [Link]("main");
const myButton = [Link]("myButton");

[Link]("click", () => {
const newParagraph = [Link]("p");
[Link] = "This is a new paragraph!";
[Link] = "blue";
[Link](newParagraph);
});

Backend Development

Backend communication protocols

HTTP/HTTPS: The foundation of data communication for the web.

 REST: An architectural style for designing networked applications.

GraphQL: A query language for APIs and a runtime for fulfilling those queries
with your existing data.

WebSockets: A communication protocol that provides full-duplex

communication channels over a single TCP connection.

ORMs

Object-Relational Mapping (ORM): A technique that lets you query and

manipulate data from a database using an object-oriented paradigm.

Examples: Sequelize, TypeORM, Prisma.

MonoRepos, Turborepo

MonoRepo: A single repository containing multiple distinct projects.

Turborepo: A high-performance build system for JavaScript and TypeScript

monorepos.

Serverless Backends

Serverless: A cloud computing execution model in which the cloud provider runs
the server, and dynamically manages the allocation of machine resources.

Examples: AWS Lambda, Google Cloud Functions, Vercel Functions.

OpenAPI Spec

OpenAPI Specification: A standard, language-agnostic interface to RESTful APIs

which allows both humans and computers to discover and understand the
capabilities of the service.

Autogenerated clients

Client Generation: Automatically generating client-side code from an OpenAPI

specification.

Scaling [Link], performance benchmarks

Clustering: Utilizing multiple CPU cores on a single machine.

 Load Balancing: Distributing traffic across multiple servers.

Benchmarking: Measuring the performance of your application under load.

Frontend Development

Reconcilers and Frontend frameworks

Reconciliation: The algorithm React uses to diff one tree with another to
determine which parts need to be changed.

Frameworks: React, Vue, Angular, Svelte.

React beginner to advance

Components: Functional and class components.

Props and State: Passing data to components and managing component-level

state.

Lifecycle Methods (Class Components): componentDidMount ,

componentDidUpdate , componentWillUnmount .

Hooks (Functional Components): useState , useEffect , useContext ,

useReducer , custom hooks.

Internals of state, Context API

State: How React manages data that changes over time.

Context API: A way to share state between components without having to pass
props down manually at every level.

State management using recoil

Recoil: A state management library for React that provides a more flexible and
efficient way to manage global state.

CSS you need to know of, Flexbox, basic styling

Selectors, properties, values.

Box model: Margin, border, padding, content.

Flexbox: A layout model for creating flexible and responsive layouts.

Frontend UI frameworks, Deep dive into Tailwind

UI Frameworks: Bootstrap, Material-UI, Ant Design.

Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.

Containerization, Docker

Docker: A platform for developing, shipping, and running applications in

containers.

Containers: A standard unit of software that packages up code and all its
dependencies so the application runs quickly and reliably from one computing
environment to another.

[Link]

As covered in the main guide.

Custom hooks

Custom Hooks: A way to reuse stateful logic between different components.

In house auth using next auth

[Link]: A complete open-source authentication solution for [Link]

applications.

Basic Devops

Docker end to end

Dockerfile: A text document that contains all the commands a user could call on
the command line to assemble an image.

Docker Compose: A tool for defining and running multi-container Docker

applications.

Deploying to AWS servers

EC2: Elastic Compute Cloud (virtual servers).

S3: Simple Storage Service (object storage).

 RDS: Relational Database Service (managed databases).

Elastic Beanstalk: A PaaS for deploying and scaling web applications.

Newer clouds like fly/Remix

[Link]: A platform for deploying applications close to your users.

Remix: A full stack web framework that lets you focus on the user interface and
work back through web standards to deliver a fast, slick, and resilient user
experience.

Nginx and reverse proxies

Nginx: A high-performance web server, reverse proxy, and load balancer.

Reverse Proxy: A server that sits in front of web servers and forwards client (e.g.
web browser) requests to those web servers.