mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-31 21:11:44 +02:00
chore: sync content to repo
This commit is contained in:
kamranahmedse
committed by
Kamran Ahmed
Kamran Ahmed
parent
ed2a251de4
commit
5d85495d72
@@ -1 +1,8 @@
|
||||
# App
|
||||
# App Router
|
||||
|
||||
The App Router is a file-system based router that uses React's latest features, such as [Server Components](https://react.dev/reference/rsc/server-components), [Suspense](https://react.dev/reference/react/Suspense), and [Server Functions](https://react.dev/reference/rsc/server-functions)
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@App Router Tutorial](https://nextjs.org/learn/dashboard-app)
|
||||
- [@article@Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript](https://www.youtube.com/watch?v=ZVnjOPwW4ZA)
|
||||
@@ -1 +1,8 @@
|
||||
# create-next-app
|
||||
# create-next-app
|
||||
|
||||
The create-next-app CLI allow you to create a new Next.js application using the default template or an example from a public GitHub repository. It is the easiest way to get started with Next.js.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@create-next-app](https://nextjs.org/docs/app/api-reference/cli/create-next-app)
|
||||
- [@video@Create Next App | Create Next Js Project](https://www.youtube.com/watch?v=o1cRvsrHbfo)
|
||||
@@ -1 +1,10 @@
|
||||
# CSR
|
||||
# Client-Side Rendering (CSR)
|
||||
|
||||
In Client-Side Rendering (CSR) with React, the browser downloads a minimal HTML page and the JavaScript needed for the page. The JavaScript is then used to update the DOM and render the page. When the application is first loaded, the user may notice a slight delay before they can see the full page, this is because the page isn't fully rendered until all the JavaScript is downloaded, parsed, and executed.
|
||||
|
||||
After the page has been loaded for the first time, navigating to other pages on the same website is typically faster, as only necessary data needs to be fetched, and JavaScript can re-render parts of the page without requiring a full page refresh.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Client-side Rendering (CSR)](https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering)
|
||||
- [@article@What is Client-side Rendering (CSR)?](https://prismic.io/blog/client-side-rendering)
|
||||
@@ -1 +1,10 @@
|
||||
# Introduction
|
||||
# Introduction
|
||||
|
||||
Next.js is a React framework that enables functionalities like server-side rendering and static site generation for web applications. It provides a structure for organizing React components, handling routing, and optimizing performance. Next.js simplifies the process of building production-ready, full-stack web applications with React.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Next.js](https://nextjs.org/)
|
||||
- [@official@Next.js Docs](https://nextjs.org/docs)
|
||||
- [@official@Next.js Course](https://nextjs.org/learn)
|
||||
- [@opensource@Next.js](https://github.com/vercel/next.js)
|
||||
@@ -1 +1,10 @@
|
||||
# JavaScript Basics
|
||||
# JavaScript Basics
|
||||
|
||||
JavaScript is a programming language that adds interactivity to websites. It allows you to create dynamic content, control multimedia, animate images, and much more. Think of HTML as the structure of a house, CSS as the interior design, and JavaScript as the electrical system that makes everything work. Understanding JavaScript is crucial before diving into Next.js because Next.js is built on top of React, which itself is a JavaScript library. Without a solid grasp of JavaScript fundamentals, you'll find it difficult to understand and effectively use Next.js's features and concepts.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
|
||||
- [@article@The Modern JavaScript Tutorial](https://javascript.info/)
|
||||
- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c)
|
||||
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)
|
||||
@@ -1 +1,9 @@
|
||||
# Next.js Routing Basics
|
||||
# Next.js Routing Basics
|
||||
|
||||
Routing is the process of defining how an application responds to client requests to specific endpoints (URIs). In Next.js, routing is primarily file-system based. This means that the structure of your `pages` directory directly corresponds to the routes of your application. Each file in the `pages` directory becomes a route based on its filename. For example, a file named `about.js` in the `pages` directory will be accessible at the `/about` route.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
|
||||
- [@official@Defining Routes](https://nextjs.org/docs/14/app/building-your-application/routing/defining-routes)
|
||||
- [@video@Next.js 15 Routing Explained For Beginners](https://www.youtube.com/watch?v=qivq_vDYFGk)
|
||||
@@ -1 +1,10 @@
|
||||
# Next.js
|
||||
# Next.js
|
||||
|
||||
Next.js is a React framework that provides extra features and optimizations on top of React for building web applications. It simplifies development by offering solutions for routing, data fetching, and server-side rendering out of the box. This allows developers to create performant and scalable web applications with less configuration.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Next.js](https://nextjs.org/)
|
||||
- [@article@Mastering Next.js](https://masteringnextjs.com)
|
||||
- [@video@Next.js Full course](https://www.youtube.com/watch?v=9P8mASSREYM)
|
||||
- [@video@Next.js for Beginners - freeCodeCamp](https://youtu.be/KjY94sAKLlw?si=orve81YcY8Fm2vDy)
|
||||
@@ -1 +1,8 @@
|
||||
# Pages
|
||||
# Pages Router
|
||||
|
||||
The Pages Router in Next.js is a file-system based router built around the `pages` directory. Each file in the `pages` directory becomes a route based on its file name. For example, a file named `about.js` would create a route at `/about`. This approach simplifies routing by automatically mapping files to routes, making it easy to create and manage different pages within your application.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Pages Router](https://nextjs.org/docs/pages)
|
||||
- [@official@Pages Router Tutorial](https://nextjs.org/learn/pages-router)
|
||||
@@ -1 +1,7 @@
|
||||
# React Frameworks
|
||||
# React Frameworks
|
||||
|
||||
React frameworks provide structure and tools to streamline the development of React applications. They offer solutions for common challenges like routing, data fetching, state management, and build processes, allowing developers to focus on building features rather than configuring infrastructure. These frameworks often include pre-built components, optimized performance configurations, and conventions that promote code organization and maintainability.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Comparing The Top React Frameworks](https://dev.to/surajondev/comparing-the-top-cra-alternatives-9cg)
|
||||
@@ -1 +1,9 @@
|
||||
# Remix
|
||||
# Remix
|
||||
|
||||
Remix is a full-stack web framework that focuses on web standards and modern web development patterns. It emphasizes server-side rendering and progressive enhancement to deliver fast and resilient user experiences. Remix leverages web fundamentals like HTTP caching and distributed systems to build robust and performant web applications.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Remix](https://remix.run/)
|
||||
- [@official@Remix Docs](https://v2.remix.run/docs/)
|
||||
- [@video@Remix Crash Course 2023](https://www.youtube.com/watch?v=RBYJTop1e-g)
|
||||
@@ -1 +1,9 @@
|
||||
# Rendering Strategies
|
||||
# Rendering Strategies
|
||||
|
||||
Rendering strategies determine how your application's user interface is generated and delivered to the user's browser. Different strategies offer varying trade-offs between performance, SEO, and data freshness. Choosing the right rendering strategy is crucial for optimizing your application based on its specific requirements and content characteristics.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Rendering Strategies](https://nextjs.org/learn/seo/rendering-strategies)
|
||||
- [@official@How to build single-page applications with Next.js](https://nextjs.org/docs/app/guides/single-page-applications)
|
||||
- [@article@Next.js Rendering Strategies: SSR, SSG, and ISR Compared](https://hybridheroes.de/blog/2023-05-31-next-js-rendering-strategies/)
|
||||
@@ -1 +1,9 @@
|
||||
# SPA vs SSR
|
||||
# SPA vs SSR
|
||||
|
||||
Single-Page Applications (SPAs) load a single HTML page and dynamically update the content using JavaScript, providing a fluid user experience without full page reloads. Server-Side Rendering (SSR), on the other hand, generates the HTML on the server for each request, sending a fully rendered page to the client. Next.js allows you to choose between these approaches or even combine them, offering flexibility in optimizing for performance, SEO, and user experience.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@How to build single-page applications with Next.js](https://nextjs.org/docs/app/guides/single-page-applications)
|
||||
- [@official@Server-side Rendering (SSR)](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering)
|
||||
- [@article@https://dev.to/santhanam87/ssr-vs-spa-showdown-choosing-the-right-rendering-approach-for-your-web-app-4439](https://dev.to/santhanam87/ssr-vs-spa-showdown-choosing-the-right-rendering-approach-for-your-web-app-4439)
|
||||
@@ -1 +1,8 @@
|
||||
# SPA
|
||||
# Single-Page Application (SPA) Rendering
|
||||
|
||||
A Single-Page Application (SPA) is a web application that loads a single HTML page and dynamically updates that page as the user interacts with the application. This is achieved by using JavaScript to manipulate the DOM (Document Object Model) directly, rather than requesting new HTML pages from the server for each interaction. This approach provides a more fluid and responsive user experience, as the browser doesn't need to reload the entire page for every change.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@https://nextjs.org/docs/app/guides/single-page-applications](https://nextjs.org/docs/app/guides/single-page-applications)
|
||||
- [@article@Single-page application](https://en.wikipedia.org/wiki/Single-page_application)
|
||||
@@ -1 +1,7 @@
|
||||
# SSG
|
||||
# Static Site Generation (SSG)
|
||||
|
||||
Static Site Generation (SSG) is a rendering method that generates HTML pages at build time. This means that when a user requests a page, the server sends a pre-rendered HTML file, rather than dynamically generating it on each request. This approach leads to faster load times and improved SEO, as search engines can easily crawl and index the static content.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Static Site Generation (SSG)](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation)
|
||||
@@ -1 +1,8 @@
|
||||
# SSR
|
||||
# Server-Side Rendering (SSR)
|
||||
|
||||
Server-Side Rendering (SSR) is a technique where a web application's HTML is generated on the server in response to each user request. The server then sends the fully rendered HTML to the client's browser, which displays it. This differs from client-side rendering, where the browser downloads a minimal HTML page and then uses JavaScript to render the content.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Server-side Rendering (SSR)](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering)
|
||||
- [@article@What is Server-Side Rendering: Definition, Benefits and Risks](https://solutionshub.epam.com/blog/post/what-is-server-side-rendering)
|
||||
@@ -1 +1,13 @@
|
||||
# Types of routers
|
||||
# Types of Routers
|
||||
|
||||
Next.js has two different routers:
|
||||
|
||||
- **App Router**: The newer router that supports new React features like Server Components.
|
||||
- **Pages Router**: The original router, still supported and being improved.
|
||||
|
||||
Before Next.js 13, the Pages Router was the main way to create routes in Next.js. It's still supported in newer versions of Next.js, but Next.js recommends migrating to the new App Router to leverage React's latest features.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Next.js Docs](https://nextjs.org/docs#app-router-and-pages-router)
|
||||
- [@video@Next.js App vs. Pages Router - Which One is Better?](https://www.youtube.com/watch?v=EYDOXzpTRvw)
|
||||
@@ -1 +1,10 @@
|
||||
# Why Frontend Frameworks
|
||||
# Why Frontend Frameworks?
|
||||
|
||||
Building modern web applications often involves managing complex user interfaces, handling data efficiently, and ensuring a smooth user experience. Frontend frameworks like React, Angular, and Next.js provide a structured approach to these challenges. They offer pre-built components, routing solutions, state management tools, and optimized build processes, allowing developers to focus on building features rather than reinventing the wheel. This leads to faster development cycles, more maintainable code, and ultimately, better web applications.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Web3 Frontend – Everything You Need to Learn About Building Dapp Frontends](https://moralis.io/web3-frontend-everything-you-need-to-learn-about-building-dapp-frontends/)
|
||||
- [@video@hat is the difference between a framework and a library?](https://www.youtube.com/watch?v=D_MO9vIRBcA)
|
||||
- [@video@Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE)
|
||||
- [@feed@xplore top posts about Frontend Development](https://app.daily.dev/tags/frontend?ref=roadmapsh)
|
||||
@@ -1 +1,7 @@
|
||||
# Why Next.js
|
||||
# Why Next.js?
|
||||
|
||||
Next.js is a React framework that provides extra features and optimizations beyond what React offers on its own. When choosing a framework built on React, Next.js stands out because it simplifies development with features like built-in routing, server-side rendering, and static site generation. These capabilities improve performance, SEO, and the overall developer experience compared to building a React application from scratch or using other frameworks that require more manual configuration.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@10 Must-Know Benefits of Next.js for Modern Web Apps](https://www.designrush.com/agency/web-development-companies/nextjs/trends/benefits-of-next-js)
|
||||
@@ -1 +1,10 @@
|
||||
# Why React
|
||||
# Why React?
|
||||
|
||||
React is a JavaScript library designed for building user interfaces in a declarative and component-based way. It simplifies the process of creating dynamic and interactive web applications by allowing developers to break down complex UIs into smaller, reusable pieces. This approach promotes code maintainability, reusability, and efficiency, making it easier to manage and update large-scale frontend projects. React also works with tools like Redux for data management and React Native for mobile apps. It's popular because it's clear, fast, and has a big community.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
|
||||
- [@official@React Website](https://react.dev)
|
||||
- [@video@Full Stack React Developer Course](https://www.youtube.com/watch?v=Bvwq_S0n2pk)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
Reference in New Issue
Block a user