Next.js - DEV Community

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Next.js - DEV Community</title> <meta name="last-updated" content="2024-11-24 05:36:25 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1732426585"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-1029a3181a2002b43ea3fa90b914eb5dacfc0a92024c5addf6b57d9e589d6a96.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-64d5fff92cc913e57b90d60da8f10d00138c946bcd9212518cbdbd2fb73efe93.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0a3711d92a5aeac98656e1629816ca6272674f32b83b3832df1a0588c877d33c.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-8dcc8a97f0617dfbfe06690e34a9d71cb7dd6554611a24ec3f71fb6b96414828.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-147cebefc5c4cddde055e8f5eb0055e811469b08405170e2411fbd7944b5ac04.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-bc498cfd7bb7d2a2da59d68d0b2055cc2dd26fee3669ab88edbb396d37bc3369.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-cc5e8a352578866203771def747f37c3ec6a0869de0458328e0fcba3d5d2fceb.js"> <link rel="canonical" href="https://dev.to/t/nextjs" /> <meta name="description" content="nextjs content on DEV Community"> <meta name="keywords" content="software development, engineering, nextjs"> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dev.to/t/nextjs" /> <meta property="og:title" content="Next.js" /> <meta property="og:description" content="Next.js content on DEV Community" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@Next.js"> <meta name="twitter:title" content="Next.js"> <meta name="twitter:description" content="Next.js content on DEV Community"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2024-11-22T13:27:42Z" data-latest-commit-id="6052d86592113c374948207a1315ec11b16ef648" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-ga4-tracking-id="G-TYEM8Y3JN3"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-1029a3181a2002b43ea3fa90b914eb5dacfc0a92024c5addf6b57d9e589d6a96.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-64d5fff92cc913e57b90d60da8f10d00138c946bcd9212518cbdbd2fb73efe93.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0a3711d92a5aeac98656e1629816ca6272674f32b83b3832df1a0588c877d33c.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a921pmwnlwies19hz0qrztm2tsbc6ku3" class="crayons-icon"><title id="a921pmwnlwies19hz0qrztm2tsbc6ku3">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ale1yq5bc5ws97n4zk5ffgcs4sgfb4ve" aria-hidden="true" class="crayons-icon"><title id="ale1yq5bc5ws97n4zk5ffgcs4sgfb4ve">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="ap1yklw1j36htpfjrz13hryythtx76np" aria-hidden="true" class="crayons-icon"><title id="ap1yklw1j36htpfjrz13hryythtx76np">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aacxkb9ojt8dau54sc361wkf050ln982" class="crayons-icon"><title id="aacxkb9ojt8dau54sc361wkf050ln982">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </a> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a70nk5v8p6fw6b1r47w0fyposx3tjuh0" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a70nk5v8p6fw6b1r47w0fyposx3tjuh0">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper tagged_articles tagged_articles-index" data-current-page="tagged_articles-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <div data-tag-id="891" data-tag-name="nextjs" id="tag-891" class="crayons-layout js-tag-card"> <header class="crayons-card branded-4 p-4 l:p-6 spec__tag-header" style="border-top-color: #000000 "> <div class="flex"> <img src="https://media2.dev.to/dynamic/image/width=64,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F89%2Fnext-js-badge.png" alt="" class="mr-4" style="transform: rotate(-20deg); width: 64px; height: 64px;" /> <div class="flex flex-col w-100 justify-center"> <div class="flex justify-between items-center"> <h1 class="crayons-title"> Next.js </h1> <div id="tag-buttons-891" class="mt-auto flex items-end justify-between"> <div class="flex gap-2"> <button class="c-btn c-btn--primary js-follow-tag-button" aria-label="Follow tag: nextjs"> Follow </button> <button class="c-btn js-hide-tag-button" aria-label="Hide tag: nextjs"> Hide </button> </div> </div> </div> <p class="max-w-100 m:max-w-75 pt-2 s:pt-4"> Next.js gives you hybrid static and server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed. </p> </div> </div> </header> </div> <div class="home sub-home" id="index-container" data-params="{"tag":"nextjs","sort_by":"hotness_score","sort_direction":"desc"}" data-which="" data-tag="nextjs" data-feed="base-feed" data-requires-approval="false" data-articles-since=""> <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left"> <div class="sidebar-bg" id="sidebar-bg-left"></div> <aside class="side-bar"> <div class="widget js-policy-article-create"> <a class="crayons-btn crayons-btn--s" href="/new/nextjs"> Create Post </a> </div> <div class="widget"> <header> <h4>submission guidelines</h4> </header> <div class="widget-body"> <p>Try to keep your posts somehow related to the Next.js framework. </p> <p><em>Think about what someone else would want to see when viewing this tag</em></p> <p>Other than that, be kind and respectful to everyone and their opinions/takes, and follow the <a href="https://dev.to/terms">conditions of use</a>!</p> </div> </div> <div class="widget"> <header> <h4>about #nextjs</h4> </header> <div class="widget-body"> <p>Next.js is an open-source web development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.</p> <p>📌 Official website: <a href="https://nextjs.org/">https://nextjs.org/</a><br> 📌 Getting started: <a href="https://nextjs.org/docs/getting-started">https://nextjs.org/docs/getting-started</a><br> 📌 Next.js in 100 seconds: <a href="https://youtu.be/Sklc_fQBmcs">https://youtu.be/Sklc_fQBmcs</a></p> </div> </div> <div class="widget"> <header> <h4>tag moderators</h4> </header> <div class="widget-body"> <div class="widget-user-pic"> <a href="/cassidoo" title="cassidoo"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F6401%2F6d75ebdc-706f-4d3b-8c26-47bf7946ece5.png" alt="cassidoo profile image"> </a> </div> <div class="widget-user-pic"> <a href="/harshhhdev" title="harshhhdev"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F476371%2F22f37954-9fb8-42dd-a21b-4a0cffa83895.png" alt="harshhhdev profile image"> </a> </div> <div class="widget-user-pic"> <a href="/asheeshh" title="asheeshh"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F720342%2F05b8b0a7-759d-4d9f-b839-3d8fdda20cb1.png" alt="asheeshh profile image"> </a> </div> <div class="widget-user-pic"> <a href="/vulcanwm" title="vulcanwm"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F820069%2Fe26eca4f-d63d-4e2f-b919-3669f1619d0b.png" alt="vulcanwm profile image"> </a> </div> <div class="widget-user-pic"> <a href="/jeffsalive" title="jeffsalive"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F171714%2Fcf2fd326-1598-4e2f-8ec1-d0603c673496.jpeg" alt="jeffsalive profile image"> </a> </div> <div class="widget-user-pic"> <a href="/erikgiovani" title="erikgiovani"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1019540%2Fac2a8ba9-d0ee-43db-9112-facab213a8ec.png" alt="erikgiovani profile image"> </a> </div> <div class="widget-user-pic"> <a href="/abhikbanerjee99" title="abhikbanerjee99"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F356656%2F064a205e-7898-48d9-a2ff-1ffbb7d10534.jpg" alt="abhikbanerjee99 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/nyctonio" title="nyctonio"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F678049%2F4f0fa1d0-7972-4d3d-863c-f26ebbbbb728.JPG" alt="nyctonio profile image"> </a> </div> <div class="widget-user-pic"> <a href="/ibrahimraimi" title="ibrahimraimi"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F441205%2F3ff35fa2-96fe-4c91-bd73-29092dc887f0.png" alt="ibrahimraimi profile image"> </a> </div> <div class="widget-user-pic"> <a href="/alisinayousofi" title="alisinayousofi"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1043717%2F884aac53-ea51-4325-9b6b-f19fddcbff10.jpg" alt="alisinayousofi profile image"> </a> </div> <div class="widget-user-pic"> <a href="/clericcoder" title="clericcoder"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F960475%2F2de25dbe-272f-42fc-9d45-e9a673d05c95.jpeg" alt="clericcoder profile image"> </a> </div> <div class="widget-user-pic"> <a href="/sauain" title="sauain"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F269955%2Fe9c19f8a-fbff-4e31-a547-8a4c178e03f9.jpg" alt="sauain profile image"> </a> </div> <div class="widget-user-pic"> <a href="/ajaymanikanta1123" title="ajaymanikanta1123"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F180631%2F2d162194-f899-4175-86e4-5faf75e3e3e7.png" alt="ajaymanikanta1123 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/moinulmoin" title="moinulmoin"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F369480%2Fc00e4c14-adff-4b6a-b7de-caa5c9d6a35b.png" alt="moinulmoin profile image"> </a> </div> <div class="widget-user-pic"> <a href="/capscode" title="capscode"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F518225%2Fa7680d82-ec04-47a6-9f91-87d30e2da69d.png" alt="capscode profile image"> </a> </div> <div class="widget-user-pic"> <a href="/navdeepm20" title="navdeepm20"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F534624%2F3e7f3f6b-a7ef-4e3d-b57b-03c968cd2b9e.jpg" alt="navdeepm20 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/icflorescu" title="icflorescu"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F130686%2F5805e201-0573-4a08-bcd3-d78742a0c035.jpeg" alt="icflorescu profile image"> </a> </div> <div class="widget-user-pic"> <a href="/esteban_vc7" title="esteban_vc7"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F461708%2Fa206f819-aa4b-421a-a34d-ca20cfbffbc6.jpg" alt="esteban_vc7 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/ekimcem" title="ekimcem"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F481886%2Fff64fa9b-dd77-4a9e-ba50-896385203e19.png" alt="ekimcem profile image"> </a> </div> <div class="widget-user-pic"> <a href="/respect17" title="respect17"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F981638%2Fe955e6f6-c04a-4341-b6cb-ce5287cf75e7.jpeg" alt="respect17 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/networkandcode" title="networkandcode"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F593072%2F63d1a44c-5195-4c3c-89f2-51eed55bf176.jpeg" alt="networkandcode profile image"> </a> </div> <div class="widget-user-pic"> <a href="/aryan_shourie" title="aryan_shourie"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1087949%2F19324ca5-7f5b-4e6e-9260-f950e96daef4.jpeg" alt="aryan_shourie profile image"> </a> </div> <div class="widget-user-pic"> <a href="/sonicx180" title="sonicx180"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F860666%2Fe10d03b6-bdd9-4bbf-96b5-d88e658334d8.png" alt="sonicx180 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/bansikah" title="bansikah"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F986646%2F61247089-46d8-4739-be45-f47d34d83d9f.jpeg" alt="bansikah profile image"> </a> </div> <div class="widget-user-pic"> <a href="/rishikeshvedpathak" title="rishikeshvedpathak"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F307652%2F17b87a1f-ae11-4742-b1e7-7e17d93a922e.jpg" alt="rishikeshvedpathak profile image"> </a> </div> <div class="widget-user-pic"> <a href="/samucadev" title="samucadev"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F766168%2Fa70918e7-84c7-489a-ab3a-7c1cc8b51d3c.png" alt="samucadev profile image"> </a> </div> <div class="widget-user-pic"> <a href="/dindustack" title="dindustack"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F720125%2F9cdc4dcf-33a6-4413-a6dc-377f57df5a5d.JPG" alt="dindustack profile image"> </a> </div> <div class="widget-user-pic"> <a href="/vincentdorian" title="vincentdorian"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1035863%2F9fdac995-faca-4185-955e-547f5bf12550.jpeg" alt="vincentdorian profile image"> </a> </div> <div class="widget-user-pic"> <a href="/gautamvaishnav" title="gautamvaishnav"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F928159%2F4801a41f-a07f-4393-afe0-bd2b21be2e12.jpg" alt="gautamvaishnav profile image"> </a> </div> <div class="widget-user-pic"> <a href="/codablack23" title="codablack23"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F954462%2F2d313c6b-e11f-4efc-8b3b-331e770c3482.png" alt="codablack23 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/ishmam" title="ishmam"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F547390%2F5622738e-3ee5-412b-ac36-fcd7abd5b1b3.png" alt="ishmam profile image"> </a> </div> <div class="widget-user-pic"> <a href="/aklite9" title="aklite9"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F770378%2Facb98591-20e2-43ab-bdab-02337269ef28.jpg" alt="aklite9 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/celest67" title="celest67"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1014759%2F5ff7b746-457e-46b0-856e-53629229ad3c.jpg" alt="celest67 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/prodevxpert" title="prodevxpert"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1049252%2F53b1827f-c54d-4b4d-9a87-d89732768057.jpg" alt="prodevxpert profile image"> </a> </div> <div class="widget-user-pic"> <a href="/akash2819" title="akash2819"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1031919%2F86878895-ef56-4ec1-8bb6-5800954d3d85.jpeg" alt="akash2819 profile image"> </a> </div> <div class="widget-user-pic"> <a href="/iambstha" title="iambstha"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1061146%2F4e6b5002-ab24-40e3-9fe4-980dfe398e24.png" alt="iambstha profile image"> </a> </div> <div class="widget-user-pic"> <a href="/thakursahab999" title="thakursahab999"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1041236%2Fdbd00440-c00c-43ee-a639-c1b585c17dda.jpeg" alt="thakursahab999 profile image"> </a> </div> </div> </div> <div class="sidebar-data"> <div> 6184 Posts Published </div> <hr /> <div class="olderposts-header">Older #nextjs posts</div> <div class="olderposts-links"> <span class="olderposts-pagenumber">1</span> <a href="https://dev.to/t/nextjs/page/2" class="olderposts-pagenumber">2</a> <a href="https://dev.to/t/nextjs/page/3" class="olderposts-pagenumber">3</a> <a href="https://dev.to/t/nextjs/page/4" class="olderposts-pagenumber">4</a> <a href="https://dev.to/t/nextjs/page/5" class="olderposts-pagenumber">5</a> <a href="https://dev.to/t/nextjs/page/6" class="olderposts-pagenumber">6</a> <a href="https://dev.to/t/nextjs/page/7" class="olderposts-pagenumber">7</a> <a href="https://dev.to/t/nextjs/page/8" class="olderposts-pagenumber">8</a> <a href="https://dev.to/t/nextjs/page/9" class="olderposts-pagenumber">9</a> <div> …<a href="https://dev.to/t/nextjs/page/75" class="olderposts-pagenumber">75</a> …<a href="https://dev.to/t/nextjs/page/103" class="olderposts-pagenumber">103</a> </div> </div> </div> </aside> </div> <main class="articles-list" id="main-content" data-follow-button-container="true"> <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls"> <h1 class="screen-reader-only">Posts</h1> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden mb-auto" id="on-page-nav-butt-left" aria-label="nav-button-left"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="abkz0i6a9h88lk9kldc5g0phuyjo639r" class="crayons-icon"><title id="abkz0i6a9h88lk9kldc5g0phuyjo639r">Left menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> <div class="flex-1 flex items-center justify-between"> <div class="crayons-notice w-100" aria-live="polite">👋 <a href="/enter">Sign in</a> for the ability to sort posts by <strong>relevant</strong>, <strong>latest</strong>, or <strong>top</strong>.</div> </div> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden mb-auto" id="on-page-nav-butt-right" aria-label="nav-button-right"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a967uwjcof2wci4aj0ys42u9zyxz3m63" class="crayons-icon"><title id="a967uwjcof2wci4aj0ys42u9zyxz3m63">Right menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> </header> <div class="substories" id="substories"> <div class="crayons-story " data-feed-content-id="2117950" data-content-user-id="243922"> <a href="/robertobutti/how-to-build-a-dynamic-website-with-nextjs-15-app-router-react-19-storyblok-and-bun--2972" aria-labelledby="article-link-2117950" class="crayons-story__hidden-navigation-link">How to build a dynamic website with Next.js 15 App Router, React 19, Storyblok, and Bun (+ Typescript)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/robertobutti" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F243922%2F13c0045e-6656-4f74-aa57-3f9f39716be5.jpeg" alt="robertobutti profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/robertobutti" class="crayons-story__secondary fw-medium m:hidden"> Roberto B. </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2117950" aria-controls="story-author-preview-content-2117950" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Roberto B. profile details"> Roberto B. </button> <div id="story-author-preview-content-2117950" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/robertobutti" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F243922%2F13c0045e-6656-4f74-aa57-3f9f39716be5.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Roberto B.</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":243922,"className":"User","name":"Roberto B."}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="243922"></div> </div> </div> </div> </div> <a href="/robertobutti/how-to-build-a-dynamic-website-with-nextjs-15-app-router-react-19-storyblok-and-bun--2972" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-23T16:48:17Z">Nov 23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732380497"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/robertobutti/how-to-build-a-dynamic-website-with-nextjs-15-app-router-react-19-storyblok-and-bun--2972" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl8pcpm4aee23pss2vgim.png" id="article-link-2117950"> How to build a dynamic website with Next.js 15 App Router, React 19, Storyblok, and Bun (+ Typescript) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/storyblok"><span class="crayons-tag__prefix">#</span>storyblok</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/bunjs"><span class="crayons-tag__prefix">#</span>bunjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/robertobutti/how-to-build-a-dynamic-website-with-nextjs-15-app-router-react-19-storyblok-and-bun--2972" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2117950" aria-label="Add a comment to post - How to build a dynamic website with Next.js 15 App Router, React 19, Storyblok, and Bun (+ Typescript)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">3<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/robertobutti/how-to-build-a-dynamic-website-with-nextjs-15-app-router-react-19-storyblok-and-bun--2972#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How to build a dynamic website with Next.js 15 App Router, React 19, Storyblok, and Bun (+ Typescript)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aplxyakv0m598acegqkcp8jhrgneilet" class="crayons-icon"><title id="aplxyakv0m598acegqkcp8jhrgneilet">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> <button type="button" id="article-save-button-2117950" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2117950" data-article-author-id="243922" aria-label="Save post How to build a dynamic website with Next.js 15 App Router, React 19, Storyblok, and Bun (+ Typescript) to reading list" title="Save post How to build a dynamic website with Next.js 15 App Router, React 19, Storyblok, and Bun (+ Typescript) to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2117127" data-content-user-id="2452209"> <a href="/fecommunity_27/mono-repository-solutions-in-the-industry-and-the-pnpm-practice-in-reactpress-1i00" aria-labelledby="article-link-2117127" class="crayons-story__hidden-navigation-link">Mono Repository Solutions in the Industry and the PNPM Practice in ReactPress</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/fecommunity_27" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2452209%2F784db37f-b89a-4379-8232-51a1d27d135c.png" alt="fecommunity_27 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/fecommunity_27" class="crayons-story__secondary fw-medium m:hidden"> FECommunity </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2117127" aria-controls="story-author-preview-content-2117127" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="FECommunity profile details"> FECommunity </button> <div id="story-author-preview-content-2117127" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/fecommunity_27" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2452209%2F784db37f-b89a-4379-8232-51a1d27d135c.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">FECommunity</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2452209,"className":"User","name":"FECommunity"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2452209"></div> </div> </div> </div> </div> <a href="/fecommunity_27/mono-repository-solutions-in-the-industry-and-the-pnpm-practice-in-reactpress-1i00" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T15:46:15Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732290375"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/fecommunity_27/mono-repository-solutions-in-the-industry-and-the-pnpm-practice-in-reactpress-1i00" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxfdoa2frjbs8vdgxcnqt.png" id="article-link-2117127"> Mono Repository Solutions in the Industry and the PNPM Practice in ReactPress </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/nestjs"><span class="crayons-tag__prefix">#</span>nestjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/fecommunity_27/mono-repository-solutions-in-the-industry-and-the-pnpm-practice-in-reactpress-1i00" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2117127" aria-label="Add a comment to post - Mono Repository Solutions in the Industry and the PNPM Practice in ReactPress"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/fecommunity_27/mono-repository-solutions-in-the-industry-and-the-pnpm-practice-in-reactpress-1i00#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Mono Repository Solutions in the Industry and the PNPM Practice in ReactPress"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afcwjpdvvk6eee4taea0sl6vazyotug1" class="crayons-icon"><title id="afcwjpdvvk6eee4taea0sl6vazyotug1">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2117127" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2117127" data-article-author-id="2452209" aria-label="Save post Mono Repository Solutions in the Industry and the PNPM Practice in ReactPress to reading list" title="Save post Mono Repository Solutions in the Industry and the PNPM Practice in ReactPress to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2117399" data-content-user-id="2028059"> <a href="/alex_rapp_58f44471ada3639/build-a-full-stack-ecommerce-app-with-nextjs-15-a-step-by-step-guide-6f3" aria-labelledby="article-link-2117399" class="crayons-story__hidden-navigation-link">Build a Full Stack eCommerce App with Next.js 15: A Step-by-Step Guide</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alex_rapp_58f44471ada3639" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2028059%2F76b5070e-48db-4fe4-82fc-49003eab0d3f.jpg" alt="alex_rapp_58f44471ada3639 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alex_rapp_58f44471ada3639" class="crayons-story__secondary fw-medium m:hidden"> Alex Rapp </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2117399" aria-controls="story-author-preview-content-2117399" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Alex Rapp profile details"> Alex Rapp </button> <div id="story-author-preview-content-2117399" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alex_rapp_58f44471ada3639" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2028059%2F76b5070e-48db-4fe4-82fc-49003eab0d3f.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Alex Rapp</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2028059,"className":"User","name":"Alex Rapp"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2028059"></div> </div> </div> </div> </div> <a href="/alex_rapp_58f44471ada3639/build-a-full-stack-ecommerce-app-with-nextjs-15-a-step-by-step-guide-6f3" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T23:23:59Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732317839"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alex_rapp_58f44471ada3639/build-a-full-stack-ecommerce-app-with-nextjs-15-a-step-by-step-guide-6f3" data-preload-image="" id="article-link-2117399"> Build a Full Stack eCommerce App with Next.js 15: A Step-by-Step Guide </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 102, 237, 0.10); --tag-prefix: #ff66ed; --tag-bg-hover: rgba(255, 102, 237, 0.10); --tag-prefix-hover: #ff66ed; " href="/t/learning"><span class="crayons-tag__prefix">#</span>learning</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alex_rapp_58f44471ada3639/build-a-full-stack-ecommerce-app-with-nextjs-15-a-step-by-step-guide-6f3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2117399" aria-label="Add a comment to post - Build a Full Stack eCommerce App with Next.js 15: A Step-by-Step Guide"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/alex_rapp_58f44471ada3639/build-a-full-stack-ecommerce-app-with-nextjs-15-a-step-by-step-guide-6f3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Build a Full Stack eCommerce App with Next.js 15: A Step-by-Step Guide"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a2snivpac2x2l27v473cjh21cz7oud6i" class="crayons-icon"><title id="a2snivpac2x2l27v473cjh21cz7oud6i">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2117399" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2117399" data-article-author-id="2028059" aria-label="Save post Build a Full Stack eCommerce App with Next.js 15: A Step-by-Step Guide to reading list" title="Save post Build a Full Stack eCommerce App with Next.js 15: A Step-by-Step Guide to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2117124" data-content-user-id="1928341"> <a href="/polipo_gio/complex-designs-happy-developers-polipo-the-first-build-tool-for-figma-kg7" aria-labelledby="article-link-2117124" class="crayons-story__hidden-navigation-link">Complex designs, happy developers: Polipo, the first build tool for Figma.</a> <a href="/polipo_gio/complex-designs-happy-developers-polipo-the-first-build-tool-for-figma-kg7" class="crayons-story__video" style="background-image:url(https://media2.dev.to/dynamic/image/width=880,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdw71fyauz7yz9.cloudfront.net%2Fvideo-upload__c1fba5cee27ce5a1a872adef5684bf09%2Fthumbs-video-upload__c1fba5cee27ce5a1a872adef5684bf09-00001.png)"> <span class="crayons-story__video__time"> 01:55 </span> </a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/polipo_gio" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1928341%2Fb9b6a5d1-7a31-4e7d-a612-9edb569533c9.png" alt="polipo_gio profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/polipo_gio" class="crayons-story__secondary fw-medium m:hidden"> Giovanni Proietta </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2117124" aria-controls="story-author-preview-content-2117124" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Giovanni Proietta profile details"> Giovanni Proietta </button> <div id="story-author-preview-content-2117124" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/polipo_gio" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1928341%2Fb9b6a5d1-7a31-4e7d-a612-9edb569533c9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Giovanni Proietta</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1928341,"className":"User","name":"Giovanni Proietta"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1928341"></div> </div> </div> </div> </div> <a href="/polipo_gio/complex-designs-happy-developers-polipo-the-first-build-tool-for-figma-kg7" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T19:45:26Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732304726"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/polipo_gio/complex-designs-happy-developers-polipo-the-first-build-tool-for-figma-kg7" data-preload-image="" id="article-link-2117124"> Complex designs, happy developers: Polipo, the first build tool for Figma. </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/polipo_gio/complex-designs-happy-developers-polipo-the-first-build-tool-for-figma-kg7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Complex designs, happy developers: Polipo, the first build tool for Figma."> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aofinqrqvba86luyyyzx5o0gni3ywv1j" class="crayons-icon"><title id="aofinqrqvba86luyyyzx5o0gni3ywv1j">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2117124" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2117124" data-article-author-id="1928341" aria-label="Save post Complex designs, happy developers: Polipo, the first build tool for Figma. to reading list" title="Save post Complex designs, happy developers: Polipo, the first build tool for Figma. to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2116436" data-content-user-id="2467546"> <a href="/amxn-yadav/my-portfolio-a-showcase-of-web-development-skills-with-nextjs-redux-1glk" aria-labelledby="article-link-2116436" class="crayons-story__hidden-navigation-link">My Portfolio: A Showcase of Web Development Skills with Next.js & Redux</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/amxn-yadav" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2467546%2F272fc79f-0e06-4440-b32e-44bc97848356.png" alt="amxn-yadav profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/amxn-yadav" class="crayons-story__secondary fw-medium m:hidden"> Aman Yadav </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2116436" aria-controls="story-author-preview-content-2116436" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Aman Yadav profile details"> Aman Yadav </button> <div id="story-author-preview-content-2116436" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/amxn-yadav" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2467546%2F272fc79f-0e06-4440-b32e-44bc97848356.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Aman Yadav</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2467546,"className":"User","name":"Aman Yadav"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2467546"></div> </div> </div> </div> </div> <a href="/amxn-yadav/my-portfolio-a-showcase-of-web-development-skills-with-nextjs-redux-1glk" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T06:47:18Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732258038"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/amxn-yadav/my-portfolio-a-showcase-of-web-development-skills-with-nextjs-redux-1glk" data-preload-image="" id="article-link-2116436"> My Portfolio: A Showcase of Web Development Skills with Next.js & Redux </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/amxn-yadav/my-portfolio-a-showcase-of-web-development-skills-with-nextjs-redux-1glk#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - My Portfolio: A Showcase of Web Development Skills with Next.js & Redux"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9qw7mhjcx8hdeb6ppc2mwb8v77n1nre" class="crayons-icon"><title id="a9qw7mhjcx8hdeb6ppc2mwb8v77n1nre">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2116436" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2116436" data-article-author-id="2467546" aria-label="Save post My Portfolio: A Showcase of Web Development Skills with Next.js & Redux to reading list" title="Save post My Portfolio: A Showcase of Web Development Skills with Next.js & Redux to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2116277" data-content-user-id="992182"> <a href="/shu12388y/resolving-breaking-changes-in-nextjs-15-and-react-19-with-npm-a-developers-guide-1oag" aria-labelledby="article-link-2116277" class="crayons-story__hidden-navigation-link">Resolving Breaking Changes in Next.js 15 and React 19 with NPM: A Developer’s Guide</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/shu12388y" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F992182%2F6f436a1c-b5b8-4634-8073-7605300f1db7.jpeg" alt="shu12388y profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/shu12388y" class="crayons-story__secondary fw-medium m:hidden"> shubham paul </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2116277" aria-controls="story-author-preview-content-2116277" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="shubham paul profile details"> shubham paul </button> <div id="story-author-preview-content-2116277" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/shu12388y" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F992182%2F6f436a1c-b5b8-4634-8073-7605300f1db7.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">shubham paul</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":992182,"className":"User","name":"shubham paul"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="992182"></div> </div> </div> </div> </div> <a href="/shu12388y/resolving-breaking-changes-in-nextjs-15-and-react-19-with-npm-a-developers-guide-1oag" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T04:59:35Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732251575"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/shu12388y/resolving-breaking-changes-in-nextjs-15-and-react-19-with-npm-a-developers-guide-1oag" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnblsvak98jl343fz5g2o.jpeg" id="article-link-2116277"> Resolving Breaking Changes in Next.js 15 and React 19 with NPM: A Developer’s Guide </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(203, 56, 55, 0.10); --tag-prefix: #cb3837; --tag-bg-hover: rgba(203, 56, 55, 0.10); --tag-prefix-hover: #cb3837; " href="/t/npm"><span class="crayons-tag__prefix">#</span>npm</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/shu12388y/resolving-breaking-changes-in-nextjs-15-and-react-19-with-npm-a-developers-guide-1oag" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2116277" aria-label="Add a comment to post - Resolving Breaking Changes in Next.js 15 and React 19 with NPM: A Developer’s Guide"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/shu12388y/resolving-breaking-changes-in-nextjs-15-and-react-19-with-npm-a-developers-guide-1oag#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Resolving Breaking Changes in Next.js 15 and React 19 with NPM: A Developer’s Guide"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a35kz3aqnkd2hbt9a222r1b7498jghva" class="crayons-icon"><title id="a35kz3aqnkd2hbt9a222r1b7498jghva">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2116277" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2116277" data-article-author-id="992182" aria-label="Save post Resolving Breaking Changes in Next.js 15 and React 19 with NPM: A Developer’s Guide to reading list" title="Save post Resolving Breaking Changes in Next.js 15 and React 19 with NPM: A Developer’s Guide to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2116216" data-content-user-id="2467004"> <a href="/ryan-chou/introducing-react-page-tracker-simplify-navigation-tracking-4n0" aria-labelledby="article-link-2116216" class="crayons-story__hidden-navigation-link">Introducing React Page Tracker: Simplify Navigation Tracking</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ryan-chou" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2467004%2F2233f69d-749f-4350-b9ad-ae7da8017a89.jpg" alt="ryan-chou profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ryan-chou" class="crayons-story__secondary fw-medium m:hidden"> Ryan Chou </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2116216" aria-controls="story-author-preview-content-2116216" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ryan Chou profile details"> Ryan Chou </button> <div id="story-author-preview-content-2116216" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ryan-chou" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2467004%2F2233f69d-749f-4350-b9ad-ae7da8017a89.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ryan Chou</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2467004,"className":"User","name":"Ryan Chou"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2467004"></div> </div> </div> </div> </div> <a href="/ryan-chou/introducing-react-page-tracker-simplify-navigation-tracking-4n0" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T03:19:29Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732245569"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/ryan-chou/introducing-react-page-tracker-simplify-navigation-tracking-4n0" data-preload-image="" id="article-link-2116216"> Introducing React Page Tracker: Simplify Navigation Tracking </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/documentreferrer"><span class="crayons-tag__prefix">#</span>documentreferrer</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/remix"><span class="crayons-tag__prefix">#</span>remix</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/ryan-chou/introducing-react-page-tracker-simplify-navigation-tracking-4n0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Introducing React Page Tracker: Simplify Navigation Tracking"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abbsn2im7ln8x4kiee1vf1w3lsrw1g72" class="crayons-icon"><title id="abbsn2im7ln8x4kiee1vf1w3lsrw1g72">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2116216" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2116216" data-article-author-id="2467004" aria-label="Save post Introducing React Page Tracker: Simplify Navigation Tracking to reading list" title="Save post Introducing React Page Tracker: Simplify Navigation Tracking to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2115684" data-content-user-id="2465238"> <a href="/madsenmm/i-created-a-visually-pleasing-html-color-viewer-92c" aria-labelledby="article-link-2115684" class="crayons-story__hidden-navigation-link">I created a visually pleasing HTML color viewer</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/madsenmm" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2465238%2F400f151e-dec2-4622-afa2-960d0aea4269.jpeg" alt="madsenmm profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/madsenmm" class="crayons-story__secondary fw-medium m:hidden"> Tobias Mønster Madsen </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2115684" aria-controls="story-author-preview-content-2115684" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Tobias Mønster Madsen profile details"> Tobias Mønster Madsen </button> <div id="story-author-preview-content-2115684" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/madsenmm" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2465238%2F400f151e-dec2-4622-afa2-960d0aea4269.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Tobias Mønster Madsen</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2465238,"className":"User","name":"Tobias Mønster Madsen"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2465238"></div> </div> </div> </div> </div> <a href="/madsenmm/i-created-a-visually-pleasing-html-color-viewer-92c" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-21T16:50:20Z">Nov 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732207820"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/madsenmm/i-created-a-visually-pleasing-html-color-viewer-92c" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9d3jlsp72jxy6wihtrmz.png" id="article-link-2115684"> I created a visually pleasing HTML color viewer </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 101, 179, 0.10); --tag-prefix: #0065B3; --tag-bg-hover: rgba(0, 101, 179, 0.10); --tag-prefix-hover: #0065B3; " href="/t/ux"><span class="crayons-tag__prefix">#</span>ux</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/shadcn"><span class="crayons-tag__prefix">#</span>shadcn</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/madsenmm/i-created-a-visually-pleasing-html-color-viewer-92c#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - I created a visually pleasing HTML color viewer"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7cu67xvo8cxnk7u5wtgvgan0q11w3xs" class="crayons-icon"><title id="a7cu67xvo8cxnk7u5wtgvgan0q11w3xs">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2115684" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2115684" data-article-author-id="2465238" aria-label="Save post I created a visually pleasing HTML color viewer to reading list" title="Save post I created a visually pleasing HTML color viewer to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2115780" data-content-user-id="2374246"> <a href="/sai_madhavreddy_888838df/implement-server-side-idle-timeout-logic-1p2j" aria-labelledby="article-link-2115780" class="crayons-story__hidden-navigation-link">Implement server side idle timeout logic</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/sai_madhavreddy_888838df" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2374246%2F6c7f2b02-8b56-4d13-8964-c7d0fd05d7a9.png" alt="sai_madhavreddy_888838df profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/sai_madhavreddy_888838df" class="crayons-story__secondary fw-medium m:hidden"> Sai Madhav Reddy </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2115780" aria-controls="story-author-preview-content-2115780" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Sai Madhav Reddy profile details"> Sai Madhav Reddy </button> <div id="story-author-preview-content-2115780" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/sai_madhavreddy_888838df" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2374246%2F6c7f2b02-8b56-4d13-8964-c7d0fd05d7a9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Sai Madhav Reddy</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2374246,"className":"User","name":"Sai Madhav Reddy"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2374246"></div> </div> </div> </div> </div> <a href="/sai_madhavreddy_888838df/implement-server-side-idle-timeout-logic-1p2j" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-21T18:37:28Z">Nov 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732214248"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/sai_madhavreddy_888838df/implement-server-side-idle-timeout-logic-1p2j" data-preload-image="" id="article-link-2115780"> Implement server side idle timeout logic </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/backend"><span class="crayons-tag__prefix">#</span>backend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/streaming"><span class="crayons-tag__prefix">#</span>streaming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/session"><span class="crayons-tag__prefix">#</span>session</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/sai_madhavreddy_888838df/implement-server-side-idle-timeout-logic-1p2j" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2115780" aria-label="Add a comment to post - Implement server side idle timeout logic"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/sai_madhavreddy_888838df/implement-server-side-idle-timeout-logic-1p2j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Implement server side idle timeout logic"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="am5t0wfd190cmtksruatzshm4lfiyaku" class="crayons-icon"><title id="am5t0wfd190cmtksruatzshm4lfiyaku">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2115780" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2115780" data-article-author-id="2374246" aria-label="Save post Implement server side idle timeout logic to reading list" title="Save post Implement server side idle timeout logic to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2101785" data-content-user-id="1171562"> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-91-100-part-10-4m7p" aria-labelledby="article-link-2101785" class="crayons-story__hidden-navigation-link">Next.js Interview Mastery: Essential Questions 91-100 (Part 10)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/cyroscript"> <img alt="CyroScript logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F9848%2F6980db21-4c31-429e-bc80-58171188d097.jpeg" class="crayons-logo__image" loading="lazy" /> </a> <a href="/probir-sarkar" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1171562%2Feaf96530-36e7-4489-9747-680675c1ee47.jpeg" alt="probir-sarkar profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/probir-sarkar" class="crayons-story__secondary fw-medium m:hidden"> Probir Sarkar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2101785" aria-controls="story-author-preview-content-2101785" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Probir Sarkar profile details"> Probir Sarkar </button> <div id="story-author-preview-content-2101785" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/probir-sarkar" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1171562%2Feaf96530-36e7-4489-9747-680675c1ee47.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Probir Sarkar</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1171562,"className":"User","name":"Probir Sarkar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1171562"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/cyroscript" class="crayons-story__secondary fw-medium">CyroScript</a> </span> </div> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-91-100-part-10-4m7p" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-20T14:30:00Z">Nov 20</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732113000"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-91-100-part-10-4m7p" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx83bko8hrv71xbt8b8j5.png" id="article-link-2101785"> Next.js Interview Mastery: Essential Questions 91-100 (Part 10) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-91-100-part-10-4m7p#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Next.js Interview Mastery: Essential Questions 91-100 (Part 10)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a76vplds9tj14deosvjdc29zjxheko9f" class="crayons-icon"><title id="a76vplds9tj14deosvjdc29zjxheko9f">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 9 min read </small> <button type="button" id="article-save-button-2101785" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2101785" data-article-author-id="1171562" aria-label="Save post Next.js Interview Mastery: Essential Questions 91-100 (Part 10) to reading list" title="Save post Next.js Interview Mastery: Essential Questions 91-100 (Part 10) to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2118344" data-content-user-id="2151943"> <a href="/joaoezx/nestjs-vs-javaspring-exploring-the-relationship-between-two-frameworks-from-different-ecosystems-26c" aria-labelledby="article-link-2118344" class="crayons-story__hidden-navigation-link">NestJS vs Java/Spring: Exploring the Relationship Between Two Frameworks from Different Ecosystems.</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/joaoezx" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2151943%2Fd1cbc56a-2468-4f7b-bbef-d3a1e73fed54.jpeg" alt="joaoezx profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/joaoezx" class="crayons-story__secondary fw-medium m:hidden"> João Freitas </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2118344" aria-controls="story-author-preview-content-2118344" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="João Freitas profile details"> João Freitas </button> <div id="story-author-preview-content-2118344" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/joaoezx" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2151943%2Fd1cbc56a-2468-4f7b-bbef-d3a1e73fed54.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">João Freitas</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2151943,"className":"User","name":"João Freitas"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2151943"></div> </div> </div> </div> </div> <a href="/joaoezx/nestjs-vs-javaspring-exploring-the-relationship-between-two-frameworks-from-different-ecosystems-26c" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-23T13:37:10Z">Nov 23</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732369030"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/joaoezx/nestjs-vs-javaspring-exploring-the-relationship-between-two-frameworks-from-different-ecosystems-26c" data-preload-image="" id="article-link-2118344"> NestJS vs Java/Spring: Exploring the Relationship Between Two Frameworks from Different Ecosystems. </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(126, 72, 16, 0.10); --tag-prefix: #7e4810; --tag-bg-hover: rgba(126, 72, 16, 0.10); --tag-prefix-hover: #7e4810; " href="/t/java"><span class="crayons-tag__prefix">#</span>java</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/spring"><span class="crayons-tag__prefix">#</span>spring</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/joaoezx/nestjs-vs-javaspring-exploring-the-relationship-between-two-frameworks-from-different-ecosystems-26c#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - NestJS vs Java/Spring: Exploring the Relationship Between Two Frameworks from Different Ecosystems."> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="at0nyk5nkgid839hz5ecbw1i6xwj2u2u" class="crayons-icon"><title id="at0nyk5nkgid839hz5ecbw1i6xwj2u2u">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2118344" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2118344" data-article-author-id="2151943" aria-label="Save post NestJS vs Java/Spring: Exploring the Relationship Between Two Frameworks from Different Ecosystems. to reading list" title="Save post NestJS vs Java/Spring: Exploring the Relationship Between Two Frameworks from Different Ecosystems. to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2111457" data-content-user-id="1885776"> <a href="/hitesh_developer/sleek-and-functional-best-admin-dashboard-templates-2dg0" aria-labelledby="article-link-2111457" class="crayons-story__hidden-navigation-link">Sleek and Functional: Best Admin Dashboard Templates</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/hitesh_developer" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1885776%2F18846d0c-385d-4755-a1d6-06e4b24a35a7.jpg" alt="hitesh_developer profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/hitesh_developer" class="crayons-story__secondary fw-medium m:hidden"> Hitesh Chauhan </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2111457" aria-controls="story-author-preview-content-2111457" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Hitesh Chauhan profile details"> Hitesh Chauhan </button> <div id="story-author-preview-content-2111457" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/hitesh_developer" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1885776%2F18846d0c-385d-4755-a1d6-06e4b24a35a7.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Hitesh Chauhan</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1885776,"className":"User","name":"Hitesh Chauhan"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1885776"></div> </div> </div> </div> </div> <a href="/hitesh_developer/sleek-and-functional-best-admin-dashboard-templates-2dg0" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-19T05:16:57Z">Nov 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731993417"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/hitesh_developer/sleek-and-functional-best-admin-dashboard-templates-2dg0" data-preload-image="" id="article-link-2111457"> Sleek and Functional: Best Admin Dashboard Templates </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/hitesh_developer/sleek-and-functional-best-admin-dashboard-templates-2dg0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Sleek and Functional: Best Admin Dashboard Templates"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8396j79rso2xm498l6dt1au2eu1bkkc" class="crayons-icon"><title id="a8396j79rso2xm498l6dt1au2eu1bkkc">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2111457" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2111457" data-article-author-id="1885776" aria-label="Save post Sleek and Functional: Best Admin Dashboard Templates to reading list" title="Save post Sleek and Functional: Best Admin Dashboard Templates to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2044714" data-content-user-id="1600825"> <a href="/redrobotdev/nextjs-deployment-using-ecs-with-fargate-2cno" aria-labelledby="article-link-2044714" class="crayons-story__hidden-navigation-link">Next.js Deployment using ECS with Fargate</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/redrobotdev" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1600825%2F231d77b1-c596-41fe-bc41-ecb8309bf37a.png" alt="redrobotdev profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/redrobotdev" class="crayons-story__secondary fw-medium m:hidden"> RedRobot.dev </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2044714" aria-controls="story-author-preview-content-2044714" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="RedRobot.dev profile details"> RedRobot.dev </button> <div id="story-author-preview-content-2044714" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/redrobotdev" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1600825%2F231d77b1-c596-41fe-bc41-ecb8309bf37a.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">RedRobot.dev</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1600825,"className":"User","name":"RedRobot.dev"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1600825"></div> </div> </div> </div> </div> <a href="/redrobotdev/nextjs-deployment-using-ecs-with-fargate-2cno" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T19:00:00Z">Nov 18</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731956400"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/redrobotdev/nextjs-deployment-using-ecs-with-fargate-2cno" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqpr1gtht2q9y74c3z7b0.png" id="article-link-2044714"> Next.js Deployment using ECS with Fargate </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(33, 43, 58, 0.10); --tag-prefix: #212b3a; --tag-bg-hover: rgba(33, 43, 58, 0.10); --tag-prefix-hover: #212b3a; " href="/t/aws"><span class="crayons-tag__prefix">#</span>aws</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/awscdk"><span class="crayons-tag__prefix">#</span>awscdk</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/amplify"><span class="crayons-tag__prefix">#</span>amplify</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/redrobotdev/nextjs-deployment-using-ecs-with-fargate-2cno#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Next.js Deployment using ECS with Fargate"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4fabf77ylnplwnbz2qymysx17mxkfn7" class="crayons-icon"><title id="a4fabf77ylnplwnbz2qymysx17mxkfn7">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 13 min read </small> <button type="button" id="article-save-button-2044714" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2044714" data-article-author-id="1600825" aria-label="Save post Next.js Deployment using ECS with Fargate to reading list" title="Save post Next.js Deployment using ECS with Fargate to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2111011" data-content-user-id="1347656"> <a href="/hasanulhaquebanna/host-nextjs-14-application-on-cpanel-2cig" aria-labelledby="article-link-2111011" class="crayons-story__hidden-navigation-link">Host Nextjs 14 Application on cPanel</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/hasanulhaquebanna" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1347656%2F37fb4c70-5249-4146-bc17-7d28b44c1f0f.jpg" alt="hasanulhaquebanna profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/hasanulhaquebanna" class="crayons-story__secondary fw-medium m:hidden"> Hasanul Haque Banna </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2111011" aria-controls="story-author-preview-content-2111011" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Hasanul Haque Banna profile details"> Hasanul Haque Banna </button> <div id="story-author-preview-content-2111011" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/hasanulhaquebanna" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1347656%2F37fb4c70-5249-4146-bc17-7d28b44c1f0f.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Hasanul Haque Banna</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1347656,"className":"User","name":"Hasanul Haque Banna"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1347656"></div> </div> </div> </div> </div> <a href="/hasanulhaquebanna/host-nextjs-14-application-on-cpanel-2cig" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T18:04:18Z">Nov 18</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731953058"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/hasanulhaquebanna/host-nextjs-14-application-on-cpanel-2cig" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2azaob6lvbvszugc1csk.png" id="article-link-2111011"> Host Nextjs 14 Application on cPanel </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/cpanel"><span class="crayons-tag__prefix">#</span>cpanel</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/hasanulhaquebanna/host-nextjs-14-application-on-cpanel-2cig#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Host Nextjs 14 Application on cPanel"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ae3qkuj5k8tguvaks88d7cu2b8d784t0" class="crayons-icon"><title id="ae3qkuj5k8tguvaks88d7cu2b8d784t0">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2111011" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2111011" data-article-author-id="1347656" aria-label="Save post Host Nextjs 14 Application on cPanel to reading list" title="Save post Host Nextjs 14 Application on cPanel to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2111007" data-content-user-id="2450732"> <a href="/humbo/building-the-imdb-of-travel-with-typescript-21jf" aria-labelledby="article-link-2111007" class="crayons-story__hidden-navigation-link">Building the IMDb of travel with TypeScript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/humbo" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2450732%2F287d6c98-eef3-496c-a822-cec964273eff.jpg" alt="humbo profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/humbo" class="crayons-story__secondary fw-medium m:hidden"> Anders Palm </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2111007" aria-controls="story-author-preview-content-2111007" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Anders Palm profile details"> Anders Palm </button> <div id="story-author-preview-content-2111007" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/humbo" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2450732%2F287d6c98-eef3-496c-a822-cec964273eff.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Anders Palm</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2450732,"className":"User","name":"Anders Palm"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2450732"></div> </div> </div> </div> </div> <a href="/humbo/building-the-imdb-of-travel-with-typescript-21jf" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T17:48:56Z">Nov 18</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731952136"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/humbo/building-the-imdb-of-travel-with-typescript-21jf" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhwrbg5cpxuljewqlf0cb.png" id="article-link-2111007"> Building the IMDb of travel with TypeScript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(61, 136, 54, 0.10); --tag-prefix: #3d8836; --tag-bg-hover: rgba(61, 136, 54, 0.10); --tag-prefix-hover: #3d8836; " href="/t/node"><span class="crayons-tag__prefix">#</span>node</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(123, 204, 124, 0.10); --tag-prefix: #7bcc7c; --tag-bg-hover: rgba(123, 204, 124, 0.10); --tag-prefix-hover: #7bcc7c; " href="/t/mongodb"><span class="crayons-tag__prefix">#</span>mongodb</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/humbo/building-the-imdb-of-travel-with-typescript-21jf#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building the IMDb of travel with TypeScript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a1t4rvzr18oaob6gvorqjqkex6q2p1tr" class="crayons-icon"><title id="a1t4rvzr18oaob6gvorqjqkex6q2p1tr">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2111007" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2111007" data-article-author-id="2450732" aria-label="Save post Building the IMDb of travel with TypeScript to reading list" title="Save post Building the IMDb of travel with TypeScript to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2108433" data-content-user-id="346355"> <a href="/anwersolangi/how-i-built-my-developer-portfolio-1m11" aria-labelledby="article-link-2108433" class="crayons-story__hidden-navigation-link">How I Built My Developer Portfolio</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/anwersolangi" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F346355%2F6e88aee1-a371-4c20-a556-af2ae7f44654.jpeg" alt="anwersolangi profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/anwersolangi" class="crayons-story__secondary fw-medium m:hidden"> Anwer Solangi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108433" aria-controls="story-author-preview-content-2108433" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Anwer Solangi profile details"> Anwer Solangi </button> <div id="story-author-preview-content-2108433" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/anwersolangi" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F346355%2F6e88aee1-a371-4c20-a556-af2ae7f44654.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Anwer Solangi</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":346355,"className":"User","name":"Anwer Solangi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="346355"></div> </div> </div> </div> </div> <a href="/anwersolangi/how-i-built-my-developer-portfolio-1m11" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-17T21:12:50Z">Nov 17</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731877970"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/anwersolangi/how-i-built-my-developer-portfolio-1m11" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F02paromn38y9tysv3xha.jpg" id="article-link-2108433"> How I Built My Developer Portfolio </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/portfolio"><span class="crayons-tag__prefix">#</span>portfolio</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/anwersolangi/how-i-built-my-developer-portfolio-1m11#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How I Built My Developer Portfolio"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ah4vl8mzanp5x797fcardv4l25s7glk6" class="crayons-icon"><title id="ah4vl8mzanp5x797fcardv4l25s7glk6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2108433" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108433" data-article-author-id="346355" aria-label="Save post How I Built My Developer Portfolio to reading list" title="Save post How I Built My Developer Portfolio to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2108051" data-content-user-id="516118"> <a href="/sbabaeizadeh/--40fg" aria-labelledby="article-link-2108051" class="crayons-story__hidden-navigation-link">🚀 𝗘𝗻𝗵𝗮𝗻𝗰𝗶𝗻𝗴 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝘂𝘀𝗲𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝘁𝗶𝗰() 𝗛𝗼𝗼𝗸 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁! 🚀</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/sbabaeizadeh" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F516118%2F8302b5b4-cb2e-4187-8280-4202bb1d3f33.jpeg" alt="sbabaeizadeh profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/sbabaeizadeh" class="crayons-story__secondary fw-medium m:hidden"> s-babaeizadeh </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108051" aria-controls="story-author-preview-content-2108051" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="s-babaeizadeh profile details"> s-babaeizadeh </button> <div id="story-author-preview-content-2108051" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/sbabaeizadeh" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F516118%2F8302b5b4-cb2e-4187-8280-4202bb1d3f33.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">s-babaeizadeh</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":516118,"className":"User","name":"s-babaeizadeh"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="516118"></div> </div> </div> </div> </div> <a href="/sbabaeizadeh/--40fg" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-17T11:58:05Z">Nov 17</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731844685"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/sbabaeizadeh/--40fg" data-preload-image="" id="article-link-2108051"> 🚀 𝗘𝗻𝗵𝗮𝗻𝗰𝗶𝗻𝗴 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝘂𝘀𝗲𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝘁𝗶𝗰() 𝗛𝗼𝗼𝗸 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁! 🚀 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/sbabaeizadeh/--40fg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🚀 𝗘𝗻𝗵𝗮𝗻𝗰𝗶𝗻𝗴 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝘂𝘀𝗲𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝘁𝗶𝗰() 𝗛𝗼𝗼𝗸 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁! 🚀"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ar9u96id61zotxe5vv37nna31c3pbcje" class="crayons-icon"><title id="ar9u96id61zotxe5vv37nna31c3pbcje">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2108051" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108051" data-article-author-id="516118" aria-label="Save post 🚀 𝗘𝗻𝗵𝗮𝗻𝗰𝗶𝗻𝗴 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝘂𝘀𝗲𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝘁𝗶𝗰() 𝗛𝗼𝗼𝗸 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁! 🚀 to reading list" title="Save post 🚀 𝗘𝗻𝗵𝗮𝗻𝗰𝗶𝗻𝗴 𝗨𝘀𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝘂𝘀𝗲𝗢𝗽𝘁𝗶𝗺𝗶𝘀𝘁𝗶𝗰() 𝗛𝗼𝗼𝗸 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁! 🚀 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2115429" data-content-user-id="1172895"> <a href="/pains_arch/hydration-error-when-installing-nextjs-15-1eb3" aria-labelledby="article-link-2115429" class="crayons-story__hidden-navigation-link">Hydration error when installing NextJS 15</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/pains_arch" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1172895%2Fb8426f22-e9cc-4c73-9153-e0ac648c4c22.jpg" alt="pains_arch profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/pains_arch" class="crayons-story__secondary fw-medium m:hidden"> Md Shykat </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2115429" aria-controls="story-author-preview-content-2115429" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Md Shykat profile details"> Md Shykat </button> <div id="story-author-preview-content-2115429" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/pains_arch" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1172895%2Fb8426f22-e9cc-4c73-9153-e0ac648c4c22.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Md Shykat</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1172895,"className":"User","name":"Md Shykat"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1172895"></div> </div> </div> </div> </div> <a href="/pains_arch/hydration-error-when-installing-nextjs-15-1eb3" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-21T13:56:29Z">Nov 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732197389"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/pains_arch/hydration-error-when-installing-nextjs-15-1eb3" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F50b5s1eh84is2ilpy3c2.png" id="article-link-2115429"> Hydration error when installing NextJS 15 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/pains_arch/hydration-error-when-installing-nextjs-15-1eb3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2115429" aria-label="Add a comment to post - Hydration error when installing NextJS 15"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/pains_arch/hydration-error-when-installing-nextjs-15-1eb3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Hydration error when installing NextJS 15"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aml0l1uruuxpt5lfhw8hlxj230fcq3rb" class="crayons-icon"><title id="aml0l1uruuxpt5lfhw8hlxj230fcq3rb">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2115429" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2115429" data-article-author-id="1172895" aria-label="Save post Hydration error when installing NextJS 15 to reading list" title="Save post Hydration error when installing NextJS 15 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2108843" data-content-user-id="2393348"> <a href="/ayusharpcoder/optimizing-nextjs-applications-for-performance-tips-and-best-practices-7j8" aria-labelledby="article-link-2108843" class="crayons-story__hidden-navigation-link">Optimizing Next.js Applications for Performance: Tips and Best Practices</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ayusharpcoder" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2393348%2Fecdfbbe3-9c39-4d18-9167-7e184bb11472.png" alt="ayusharpcoder profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ayusharpcoder" class="crayons-story__secondary fw-medium m:hidden"> Ayush Kumar Vishwakarma </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108843" aria-controls="story-author-preview-content-2108843" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ayush Kumar Vishwakarma profile details"> Ayush Kumar Vishwakarma </button> <div id="story-author-preview-content-2108843" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ayusharpcoder" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2393348%2Fecdfbbe3-9c39-4d18-9167-7e184bb11472.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ayush Kumar Vishwakarma</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2393348,"className":"User","name":"Ayush Kumar Vishwakarma"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2393348"></div> </div> </div> </div> </div> <a href="/ayusharpcoder/optimizing-nextjs-applications-for-performance-tips-and-best-practices-7j8" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T06:33:19Z">Nov 18</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731911599"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/ayusharpcoder/optimizing-nextjs-applications-for-performance-tips-and-best-practices-7j8" data-preload-image="" id="article-link-2108843"> Optimizing Next.js Applications for Performance: Tips and Best Practices </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/ayusharpcoder/optimizing-nextjs-applications-for-performance-tips-and-best-practices-7j8" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2108843" aria-label="Add a comment to post - Optimizing Next.js Applications for Performance: Tips and Best Practices"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/ayusharpcoder/optimizing-nextjs-applications-for-performance-tips-and-best-practices-7j8#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Optimizing Next.js Applications for Performance: Tips and Best Practices"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aj5dd18nrbvbj4a8ntvm100r4u6g9oml" class="crayons-icon"><title id="aj5dd18nrbvbj4a8ntvm100r4u6g9oml">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2108843" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108843" data-article-author-id="2393348" aria-label="Save post Optimizing Next.js Applications for Performance: Tips and Best Practices to reading list" title="Save post Optimizing Next.js Applications for Performance: Tips and Best Practices to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2114291" data-content-user-id="475039"> <a href="/csituma/5-vercel-features-developers-absolutely-love-5850" aria-labelledby="article-link-2114291" class="crayons-story__hidden-navigation-link">5 Vercel Features Developers Absolutely Love</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/csituma" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F475039%2F90afc0b8-8ac5-4de9-90eb-6a32bbb8cc51.jpeg" alt="csituma profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/csituma" class="crayons-story__secondary fw-medium m:hidden"> Clara Situma </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2114291" aria-controls="story-author-preview-content-2114291" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Clara Situma profile details"> Clara Situma </button> <div id="story-author-preview-content-2114291" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/csituma" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F475039%2F90afc0b8-8ac5-4de9-90eb-6a32bbb8cc51.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Clara Situma</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":475039,"className":"User","name":"Clara Situma"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="475039"></div> </div> </div> </div> </div> <a href="/csituma/5-vercel-features-developers-absolutely-love-5850" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-20T19:42:39Z">Nov 20</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732131759"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/csituma/5-vercel-features-developers-absolutely-love-5850" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fau51ty55y03smc7x2uqb.jpeg" id="article-link-2114291"> 5 Vercel Features Developers Absolutely Love </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/vercel"><span class="crayons-tag__prefix">#</span>vercel</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/csituma/5-vercel-features-developers-absolutely-love-5850" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2114291" aria-label="Add a comment to post - 5 Vercel Features Developers Absolutely Love"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/csituma/5-vercel-features-developers-absolutely-love-5850#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 5 Vercel Features Developers Absolutely Love"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acylybjrq1rwjo72syazit0uw2ytd6l5" class="crayons-icon"><title id="acylybjrq1rwjo72syazit0uw2ytd6l5">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2114291" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2114291" data-article-author-id="475039" aria-label="Save post 5 Vercel Features Developers Absolutely Love to reading list" title="Save post 5 Vercel Features Developers Absolutely Love to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2113709" data-content-user-id="2451106"> <a href="/rodolphedupuis/building-a-full-stack-app-with-nextjs-and-firebase-a-step-by-step-guide-48b7" aria-labelledby="article-link-2113709" class="crayons-story__hidden-navigation-link">Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/rodolphedupuis" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2451106%2F274e86f0-189e-4651-813a-5344673a28e0.png" alt="rodolphedupuis profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/rodolphedupuis" class="crayons-story__secondary fw-medium m:hidden"> Rodolphe Dupuis </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2113709" aria-controls="story-author-preview-content-2113709" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Rodolphe Dupuis profile details"> Rodolphe Dupuis </button> <div id="story-author-preview-content-2113709" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/rodolphedupuis" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2451106%2F274e86f0-189e-4651-813a-5344673a28e0.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Rodolphe Dupuis</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2451106,"className":"User","name":"Rodolphe Dupuis"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2451106"></div> </div> </div> </div> </div> <a href="/rodolphedupuis/building-a-full-stack-app-with-nextjs-and-firebase-a-step-by-step-guide-48b7" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-20T14:10:26Z">Nov 20</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732111826"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/rodolphedupuis/building-a-full-stack-app-with-nextjs-and-firebase-a-step-by-step-guide-48b7" data-preload-image="" id="article-link-2113709"> Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(3, 155, 229, 0.10); --tag-prefix: #039be5; --tag-bg-hover: rgba(3, 155, 229, 0.10); --tag-prefix-hover: #039be5; " href="/t/firebase"><span class="crayons-tag__prefix">#</span>firebase</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/fullstack"><span class="crayons-tag__prefix">#</span>fullstack</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/mvp"><span class="crayons-tag__prefix">#</span>mvp</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/rodolphedupuis/building-a-full-stack-app-with-nextjs-and-firebase-a-step-by-step-guide-48b7" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2113709" aria-label="Add a comment to post - Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/rodolphedupuis/building-a-full-stack-app-with-nextjs-and-firebase-a-step-by-step-guide-48b7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="an4ko0e3xw8ii5lket7djitshzejqbyj" class="crayons-icon"><title id="an4ko0e3xw8ii5lket7djitshzejqbyj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> <button type="button" id="article-save-button-2113709" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2113709" data-article-author-id="2451106" aria-label="Save post Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide to reading list" title="Save post Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2112678" data-content-user-id="389728"> <a href="/clerk/how-to-secure-liveblocks-rooms-with-clerk-in-nextjs-58oo" aria-labelledby="article-link-2112678" class="crayons-story__hidden-navigation-link">How to secure Liveblocks Rooms with Clerk in Next.js</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/clerk"> <img alt="Clerk logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F3958%2Fb1c82f7e-763f-4100-8a32-9388e33566dd.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/brianmmdev" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F389728%2F23a98fbc-3ea4-4426-ad5c-b3595fb996b9.png" alt="brianmmdev profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/brianmmdev" class="crayons-story__secondary fw-medium m:hidden"> Brian Morrison II </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2112678" aria-controls="story-author-preview-content-2112678" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Brian Morrison II profile details"> Brian Morrison II </button> <div id="story-author-preview-content-2112678" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/brianmmdev" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F389728%2F23a98fbc-3ea4-4426-ad5c-b3595fb996b9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Brian Morrison II</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":389728,"className":"User","name":"Brian Morrison II"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="389728"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/clerk" class="crayons-story__secondary fw-medium">Clerk</a> </span> </div> <a href="/clerk/how-to-secure-liveblocks-rooms-with-clerk-in-nextjs-58oo" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-19T20:50:00Z">Nov 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732049400"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/clerk/how-to-secure-liveblocks-rooms-with-clerk-in-nextjs-58oo" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgvd3j6u2wctbmkff31af.png" id="article-link-2112678"> How to secure Liveblocks Rooms with Clerk in Next.js </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/clerk"><span class="crayons-tag__prefix">#</span>clerk</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/liveblocks"><span class="crayons-tag__prefix">#</span>liveblocks</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/clerk/how-to-secure-liveblocks-rooms-with-clerk-in-nextjs-58oo" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2112678" aria-label="Add a comment to post - How to secure Liveblocks Rooms with Clerk in Next.js"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/clerk/how-to-secure-liveblocks-rooms-with-clerk-in-nextjs-58oo#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How to secure Liveblocks Rooms with Clerk in Next.js"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="as1c7yq1a26xn26junqjepp4avejdg6x" class="crayons-icon"><title id="as1c7yq1a26xn26junqjepp4avejdg6x">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2112678" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2112678" data-article-author-id="389728" aria-label="Save post How to secure Liveblocks Rooms with Clerk in Next.js to reading list" title="Save post How to secure Liveblocks Rooms with Clerk in Next.js to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2111986" data-content-user-id="441998"> <a href="/easyvipin/nextjs-tutorial-adding-navbar-with-active-styling-in-a-server-component-layout-5h68" aria-labelledby="article-link-2111986" class="crayons-story__hidden-navigation-link">Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/easyvipin" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F441998%2F4c5d565a-4c51-4786-9246-00bb5718047c.jpg" alt="easyvipin profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/easyvipin" class="crayons-story__secondary fw-medium m:hidden"> Vipin Chandra </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2111986" aria-controls="story-author-preview-content-2111986" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Vipin Chandra profile details"> Vipin Chandra </button> <div id="story-author-preview-content-2111986" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/easyvipin" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F441998%2F4c5d565a-4c51-4786-9246-00bb5718047c.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Vipin Chandra</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":441998,"className":"User","name":"Vipin Chandra"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="441998"></div> </div> </div> </div> </div> <a href="/easyvipin/nextjs-tutorial-adding-navbar-with-active-styling-in-a-server-component-layout-5h68" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-19T11:41:05Z">Nov 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732016465"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/easyvipin/nextjs-tutorial-adding-navbar-with-active-styling-in-a-server-component-layout-5h68" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2d5mtpnvwkexryywhz0f.png" id="article-link-2111986"> Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/easyvipin/nextjs-tutorial-adding-navbar-with-active-styling-in-a-server-component-layout-5h68" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2111986" aria-label="Add a comment to post - Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/easyvipin/nextjs-tutorial-adding-navbar-with-active-styling-in-a-server-component-layout-5h68#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acjjoi4c7zj56xww8t5vhve2uefy4ppy" class="crayons-icon"><title id="acjjoi4c7zj56xww8t5vhve2uefy4ppy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2111986" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2111986" data-article-author-id="441998" aria-label="Save post Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout to reading list" title="Save post Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2110681" data-content-user-id="284483"> <a href="/pagepro_agency/next-js-for-e-learning-platforms-5agi" aria-labelledby="article-link-2110681" class="crayons-story__hidden-navigation-link">Next js for E-Learning Platforms</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/pagepro_agency"> <img alt="Pagepro logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F2064%2F30cc0d9e-56dc-40f8-8436-31349508f103.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/itschrislojniewski" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F284483%2Fae5af044-f8bc-4e7c-96f1-a0954d886f24.jpg" alt="itschrislojniewski profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/itschrislojniewski" class="crayons-story__secondary fw-medium m:hidden"> Chris Lojniewski </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2110681" aria-controls="story-author-preview-content-2110681" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Chris Lojniewski profile details"> Chris Lojniewski </button> <div id="story-author-preview-content-2110681" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/itschrislojniewski" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F284483%2Fae5af044-f8bc-4e7c-96f1-a0954d886f24.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Chris Lojniewski</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":284483,"className":"User","name":"Chris Lojniewski"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="284483"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/pagepro_agency" class="crayons-story__secondary fw-medium">Pagepro</a> </span> </div> <a href="/pagepro_agency/next-js-for-e-learning-platforms-5agi" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T14:14:20Z">Nov 18</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731939260"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/pagepro_agency/next-js-for-e-learning-platforms-5agi" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz7ftikmiet773on1pc79.png" id="article-link-2110681"> Next js for E-Learning Platforms </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 102, 237, 0.10); --tag-prefix: #ff66ed; --tag-bg-hover: rgba(255, 102, 237, 0.10); --tag-prefix-hover: #ff66ed; " href="/t/learning"><span class="crayons-tag__prefix">#</span>learning</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/pagepro_agency/next-js-for-e-learning-platforms-5agi" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2110681" aria-label="Add a comment to post - Next js for E-Learning Platforms"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">3<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/pagepro_agency/next-js-for-e-learning-platforms-5agi#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Next js for E-Learning Platforms"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aqi5kufhlobdw5sjkp8hrhsi7oj2084r" class="crayons-icon"><title id="aqi5kufhlobdw5sjkp8hrhsi7oj2084r">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 7 min read </small> <button type="button" id="article-save-button-2110681" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2110681" data-article-author-id="284483" aria-label="Save post Next js for E-Learning Platforms to reading list" title="Save post Next js for E-Learning Platforms to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2102728" data-content-user-id="1239415"> <a href="/saeedniyabati/reusable-logic-in-react-with-custom-hooks-a-practical-guide-3pp8" aria-labelledby="article-link-2102728" class="crayons-story__hidden-navigation-link">Reusable Logic in React with Custom Hooks: A Practical Guide</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/saeedniyabati" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1239415%2F23b055af-3906-4f65-b604-593cd26a307e.png" alt="saeedniyabati profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/saeedniyabati" class="crayons-story__secondary fw-medium m:hidden"> Saeed Niyabati </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2102728" aria-controls="story-author-preview-content-2102728" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Saeed Niyabati profile details"> Saeed Niyabati </button> <div id="story-author-preview-content-2102728" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/saeedniyabati" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1239415%2F23b055af-3906-4f65-b604-593cd26a307e.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Saeed Niyabati</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1239415,"className":"User","name":"Saeed Niyabati"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1239415"></div> </div> </div> </div> </div> <a href="/saeedniyabati/reusable-logic-in-react-with-custom-hooks-a-practical-guide-3pp8" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-13T16:03:46Z">Nov 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731513826"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/saeedniyabati/reusable-logic-in-react-with-custom-hooks-a-practical-guide-3pp8" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdgsunw4bl9ci93ubswym.png" id="article-link-2102728"> Reusable Logic in React with Custom Hooks: A Practical Guide </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/saeedniyabati/reusable-logic-in-react-with-custom-hooks-a-practical-guide-3pp8#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Reusable Logic in React with Custom Hooks: A Practical Guide"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6drk88pzkt6z11tbc0pnqnty6nm1xzx" class="crayons-icon"><title id="a6drk88pzkt6z11tbc0pnqnty6nm1xzx">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2102728" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2102728" data-article-author-id="1239415" aria-label="Save post Reusable Logic in React with Custom Hooks: A Practical Guide to reading list" title="Save post Reusable Logic in React with Custom Hooks: A Practical Guide to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2102067" data-content-user-id="398888"> <a href="/devrim/i-created-genes-an-api-ui-framework-php-based-2kh0" aria-labelledby="article-link-2102067" class="crayons-story__hidden-navigation-link">I created Genes - An API & UI framework, Vanilla PHP/JS Based</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/devrim" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F398888%2F553f6264-4a2c-4496-840b-13c7cb578e9c.png" alt="devrim profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/devrim" class="crayons-story__secondary fw-medium m:hidden"> devrim. </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2102067" aria-controls="story-author-preview-content-2102067" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="devrim. profile details"> devrim. </button> <div id="story-author-preview-content-2102067" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/devrim" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F398888%2F553f6264-4a2c-4496-840b-13c7cb578e9c.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">devrim.</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":398888,"className":"User","name":"devrim."}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="398888"></div> </div> </div> </div> </div> <a href="/devrim/i-created-genes-an-api-ui-framework-php-based-2kh0" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-13T07:24:22Z">Nov 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731482662"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/devrim/i-created-genes-an-api-ui-framework-php-based-2kh0" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbckbu9fk6jd9lkkoofc.jpg" id="article-link-2102067"> I created Genes - An API & UI framework, Vanilla PHP/JS Based </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(16, 142, 194, 0.10); --tag-prefix: #108EC2; --tag-bg-hover: rgba(16, 142, 194, 0.10); --tag-prefix-hover: #108EC2; " href="/t/wordpress"><span class="crayons-tag__prefix">#</span>wordpress</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(220, 45, 23, 0.10); --tag-prefix: #dc2d17; --tag-bg-hover: rgba(220, 45, 23, 0.10); --tag-prefix-hover: #dc2d17; " href="/t/laravel"><span class="crayons-tag__prefix">#</span>laravel</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/devrim/i-created-genes-an-api-ui-framework-php-based-2kh0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - I created Genes - An API & UI framework, Vanilla PHP/JS Based"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aazuukkf4dn85c9etcvncbutqsx38biw" class="crayons-icon"><title id="aazuukkf4dn85c9etcvncbutqsx38biw">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2102067" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2102067" data-article-author-id="398888" aria-label="Save post I created Genes - An API & UI framework, Vanilla PHP/JS Based to reading list" title="Save post I created Genes - An API & UI framework, Vanilla PHP/JS Based to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2102330" data-content-user-id="2421994"> <a href="/solomon_tadesse_01876f63f/reactjs-vs-nextjs-detail-explanation-2edl" aria-labelledby="article-link-2102330" class="crayons-story__hidden-navigation-link">React.js vs Next.js detail explanation</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/solomon_tadesse_01876f63f" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2421994%2F20cca038-a0c8-43ac-95e7-4c9ece088e0e.png" alt="solomon_tadesse_01876f63f profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/solomon_tadesse_01876f63f" class="crayons-story__secondary fw-medium m:hidden"> solomon tadesse </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2102330" aria-controls="story-author-preview-content-2102330" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="solomon tadesse profile details"> solomon tadesse </button> <div id="story-author-preview-content-2102330" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/solomon_tadesse_01876f63f" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2421994%2F20cca038-a0c8-43ac-95e7-4c9ece088e0e.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">solomon tadesse</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2421994,"className":"User","name":"solomon tadesse"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2421994"></div> </div> </div> </div> </div> <a href="/solomon_tadesse_01876f63f/reactjs-vs-nextjs-detail-explanation-2edl" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-13T11:14:44Z">Nov 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731496484"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/solomon_tadesse_01876f63f/reactjs-vs-nextjs-detail-explanation-2edl" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7dxd2eyyb8oiot9ay2hv.png" id="article-link-2102330"> React.js vs Next.js detail explanation </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/solomon_tadesse_01876f63f/reactjs-vs-nextjs-detail-explanation-2edl#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React.js vs Next.js detail explanation"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3apvgjq46gvmqgj4b5y8h3uk7dq2kvh" class="crayons-icon"><title id="a3apvgjq46gvmqgj4b5y8h3uk7dq2kvh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2102330" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2102330" data-article-author-id="2421994" aria-label="Save post React.js vs Next.js detail explanation to reading list" title="Save post React.js vs Next.js detail explanation to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2100715" data-content-user-id="2421783"> <a href="/lettable/introducing-the-new-improved-sideprojector-1fb9" aria-labelledby="article-link-2100715" class="crayons-story__hidden-navigation-link">🚀 Introducing the New & Improved SideProjector! 🚀</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/lettable" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2421783%2F363a6b4c-88ec-4cf8-b055-85a5abfdd730.jpg" alt="lettable profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/lettable" class="crayons-story__secondary fw-medium m:hidden"> Mirza </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2100715" aria-controls="story-author-preview-content-2100715" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Mirza profile details"> Mirza </button> <div id="story-author-preview-content-2100715" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/lettable" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2421783%2F363a6b4c-88ec-4cf8-b055-85a5abfdd730.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Mirza</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2421783,"className":"User","name":"Mirza"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2421783"></div> </div> </div> </div> </div> <a href="/lettable/introducing-the-new-improved-sideprojector-1fb9" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-12T19:09:13Z">Nov 12</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731438553"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/lettable/introducing-the-new-improved-sideprojector-1fb9" data-preload-image="" id="article-link-2100715"> 🚀 Introducing the New & Improved SideProjector! 🚀 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/sideprojects"><span class="crayons-tag__prefix">#</span>sideprojects</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/lettable/introducing-the-new-improved-sideprojector-1fb9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🚀 Introducing the New & Improved SideProjector! 🚀"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ab82f54fe0wrpikibqefvf08u42kzoyi" class="crayons-icon"><title id="ab82f54fe0wrpikibqefvf08u42kzoyi">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2100715" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2100715" data-article-author-id="2421783" aria-label="Save post 🚀 Introducing the New & Improved SideProjector! 🚀 to reading list" title="Save post 🚀 Introducing the New & Improved SideProjector! 🚀 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2100459" data-content-user-id="1857827"> <a href="/tommy18062001/work-on-a-next-js-project-together-4l26" aria-labelledby="article-link-2100459" class="crayons-story__hidden-navigation-link">Work on a NEXT js Project Together</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/tommy18062001" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1857827%2F427ecc91-38d8-4cda-a75a-8be341bc181a.jpeg" alt="tommy18062001 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/tommy18062001" class="crayons-story__secondary fw-medium m:hidden"> Tommy Sylver </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2100459" aria-controls="story-author-preview-content-2100459" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Tommy Sylver profile details"> Tommy Sylver </button> <div id="story-author-preview-content-2100459" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/tommy18062001" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1857827%2F427ecc91-38d8-4cda-a75a-8be341bc181a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Tommy Sylver</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1857827,"className":"User","name":"Tommy Sylver"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1857827"></div> </div> </div> </div> </div> <a href="/tommy18062001/work-on-a-next-js-project-together-4l26" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-12T17:47:49Z">Nov 12</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731433669"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/tommy18062001/work-on-a-next-js-project-together-4l26" data-preload-image="" id="article-link-2100459"> Work on a NEXT js Project Together </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/tommy18062001/work-on-a-next-js-project-together-4l26#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Work on a NEXT js Project Together"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ak50vlkgmjn95n1wdf0i1np1mgnnhbsw" class="crayons-icon"><title id="ak50vlkgmjn95n1wdf0i1np1mgnnhbsw">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2100459" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2100459" data-article-author-id="1857827" aria-label="Save post Work on a NEXT js Project Together to reading list" title="Save post Work on a NEXT js Project Together to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2107962" data-content-user-id="1146955"> <a href="/arishn/how-i-created-a-stunning-portfolio-with-nextjs-tailwind-css-and-framer-motion-36ja" aria-labelledby="article-link-2107962" class="crayons-story__hidden-navigation-link">How I Created a Stunning Portfolio with Next.js, Tailwind CSS, and Framer Motion</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/arishn" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1146955%2F73570ad6-6311-498c-b671-1eb3b1d871bc.jpg" alt="arishn profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/arishn" class="crayons-story__secondary fw-medium m:hidden"> Arish N </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2107962" aria-controls="story-author-preview-content-2107962" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Arish N profile details"> Arish N </button> <div id="story-author-preview-content-2107962" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/arishn" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1146955%2F73570ad6-6311-498c-b671-1eb3b1d871bc.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Arish N</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1146955,"className":"User","name":"Arish N"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1146955"></div> </div> </div> </div> </div> <a href="/arishn/how-i-created-a-stunning-portfolio-with-nextjs-tailwind-css-and-framer-motion-36ja" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-17T09:57:30Z">Nov 17</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731837450"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/arishn/how-i-created-a-stunning-portfolio-with-nextjs-tailwind-css-and-framer-motion-36ja" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flrq3fbcpkduys3s6f2dy.png" id="article-link-2107962"> How I Created a Stunning Portfolio with Next.js, Tailwind CSS, and Framer Motion </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/framermotion"><span class="crayons-tag__prefix">#</span>framermotion</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/arishn/how-i-created-a-stunning-portfolio-with-nextjs-tailwind-css-and-framer-motion-36ja#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How I Created a Stunning Portfolio with Next.js, Tailwind CSS, and Framer Motion"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="anhcml745mrlsxaxpvbsagw17u6vd5tj" class="crayons-icon"><title id="anhcml745mrlsxaxpvbsagw17u6vd5tj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2107962" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2107962" data-article-author-id="1146955" aria-label="Save post How I Created a Stunning Portfolio with Next.js, Tailwind CSS, and Framer Motion to reading list" title="Save post How I Created a Stunning Portfolio with Next.js, Tailwind CSS, and Framer Motion to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2100009" data-content-user-id="389728"> <a href="/clerk/clerk-update-november-12-2024-3h6b" aria-labelledby="article-link-2100009" class="crayons-story__hidden-navigation-link">Clerk Update – November 12, 2024</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/clerk"> <img alt="Clerk logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F3958%2Fb1c82f7e-763f-4100-8a32-9388e33566dd.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/brianmmdev" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F389728%2F23a98fbc-3ea4-4426-ad5c-b3595fb996b9.png" alt="brianmmdev profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/brianmmdev" class="crayons-story__secondary fw-medium m:hidden"> Brian Morrison II </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2100009" aria-controls="story-author-preview-content-2100009" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Brian Morrison II profile details"> Brian Morrison II </button> <div id="story-author-preview-content-2100009" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/brianmmdev" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F389728%2F23a98fbc-3ea4-4426-ad5c-b3595fb996b9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Brian Morrison II</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":389728,"className":"User","name":"Brian Morrison II"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="389728"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/clerk" class="crayons-story__secondary fw-medium">Clerk</a> </span> </div> <a href="/clerk/clerk-update-november-12-2024-3h6b" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-12T17:46:38Z">Nov 12</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731433598"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/clerk/clerk-update-november-12-2024-3h6b" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frx9tdhrmrzg1dvszlu3l.png" id="article-link-2100009"> Clerk Update – November 12, 2024 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/clerk"><span class="crayons-tag__prefix">#</span>clerk</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(30, 56, 187, 0.10); --tag-prefix: #1E38BB; --tag-bg-hover: rgba(30, 56, 187, 0.10); --tag-prefix-hover: #1E38BB; " href="/t/python"><span class="crayons-tag__prefix">#</span>python</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(99, 91, 255, 0.10); --tag-prefix: #635BFF; --tag-bg-hover: rgba(99, 91, 255, 0.10); --tag-prefix-hover: #635BFF; " href="/t/stripe"><span class="crayons-tag__prefix">#</span>stripe</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/clerk/clerk-update-november-12-2024-3h6b#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Clerk Update – November 12, 2024"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="azy1k2qwbbqkrmg43j70s2rn8n1e5zc" class="crayons-icon"><title id="azy1k2qwbbqkrmg43j70s2rn8n1e5zc">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 5 min read </small> <button type="button" id="article-save-button-2100009" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2100009" data-article-author-id="389728" aria-label="Save post Clerk Update – November 12, 2024 to reading list" title="Save post Clerk Update – November 12, 2024 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2106328" data-content-user-id="1320259"> <a href="/joodi/sweet-css-animations-34k3" aria-labelledby="article-link-2106328" class="crayons-story__hidden-navigation-link">Sweet Css Animations 💥</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/joodi" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1320259%2Fcf5661b9-1a87-46bd-ac45-5fc6813c7237.png" alt="joodi profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/joodi" class="crayons-story__secondary fw-medium m:hidden"> Joodi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2106328" aria-controls="story-author-preview-content-2106328" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Joodi profile details"> Joodi </button> <div id="story-author-preview-content-2106328" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/joodi" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1320259%2Fcf5661b9-1a87-46bd-ac45-5fc6813c7237.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Joodi</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1320259,"className":"User","name":"Joodi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1320259"></div> </div> </div> </div> </div> <a href="/joodi/sweet-css-animations-34k3" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-15T22:16:09Z">Nov 15</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731708969"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/joodi/sweet-css-animations-34k3" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj5t23o2uq4t5ss01xo7s.png" id="article-link-2106328"> Sweet Css Animations 💥 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/cssanimation"><span class="crayons-tag__prefix">#</span>cssanimation</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/joodi/sweet-css-animations-34k3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2106328" aria-label="Add a comment to post - Sweet Css Animations 💥"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/joodi/sweet-css-animations-34k3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Sweet Css Animations 💥"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a41ilqyofsgqnj77v51psnhca5lnori9" class="crayons-icon"><title id="a41ilqyofsgqnj77v51psnhca5lnori9">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2106328" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2106328" data-article-author-id="1320259" aria-label="Save post Sweet Css Animations 💥 to reading list" title="Save post Sweet Css Animations 💥 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2097541" data-content-user-id="1171562"> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-41-50-part-5-eo5" aria-labelledby="article-link-2097541" class="crayons-story__hidden-navigation-link">Next.js Interview Mastery: Essential Questions 41-50 (Part 5)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/cyroscript"> <img alt="CyroScript logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F9848%2F6980db21-4c31-429e-bc80-58171188d097.jpeg" class="crayons-logo__image" loading="lazy" /> </a> <a href="/probir-sarkar" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1171562%2Feaf96530-36e7-4489-9747-680675c1ee47.jpeg" alt="probir-sarkar profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/probir-sarkar" class="crayons-story__secondary fw-medium m:hidden"> Probir Sarkar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2097541" aria-controls="story-author-preview-content-2097541" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Probir Sarkar profile details"> Probir Sarkar </button> <div id="story-author-preview-content-2097541" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/probir-sarkar" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1171562%2Feaf96530-36e7-4489-9747-680675c1ee47.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Probir Sarkar</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1171562,"className":"User","name":"Probir Sarkar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1171562"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/cyroscript" class="crayons-story__secondary fw-medium">CyroScript</a> </span> </div> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-41-50-part-5-eo5" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-15T14:30:00Z">Nov 15</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731681000"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-41-50-part-5-eo5" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl786fpobyo3gxjxku676.png" id="article-link-2097541"> Next.js Interview Mastery: Essential Questions 41-50 (Part 5) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/cyroscript/nextjs-interview-mastery-essential-questions-41-50-part-5-eo5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Next.js Interview Mastery: Essential Questions 41-50 (Part 5)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6ggn8abb1d3b7shgwdjaw5a01jvhwkn" class="crayons-icon"><title id="a6ggn8abb1d3b7shgwdjaw5a01jvhwkn">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 7 min read </small> <button type="button" id="article-save-button-2097541" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2097541" data-article-author-id="1171562" aria-label="Save post Next.js Interview Mastery: Essential Questions 41-50 (Part 5) to reading list" title="Save post Next.js Interview Mastery: Essential Questions 41-50 (Part 5) to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2093402" data-content-user-id="763169"> <a href="/pfedprog/is-nextpage-necessary-when-building-nextjs-apps-in-typescript-265c" aria-labelledby="article-link-2093402" class="crayons-story__hidden-navigation-link">Is NextPage necessary when building NextJS apps in TypeScript</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/pfedprog" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F763169%2Fd0874fd3-129c-42cc-be0f-b5123dec3ff8.jpeg" alt="pfedprog profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/pfedprog" class="crayons-story__secondary fw-medium m:hidden"> Pavel Fedotov </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2093402" aria-controls="story-author-preview-content-2093402" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Pavel Fedotov profile details"> Pavel Fedotov </button> <div id="story-author-preview-content-2093402" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/pfedprog" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F763169%2Fd0874fd3-129c-42cc-be0f-b5123dec3ff8.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Pavel Fedotov</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":763169,"className":"User","name":"Pavel Fedotov"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="763169"></div> </div> </div> </div> </div> <a href="/pfedprog/is-nextpage-necessary-when-building-nextjs-apps-in-typescript-265c" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-10T18:38:02Z">Nov 10</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731263882"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/pfedprog/is-nextpage-necessary-when-building-nextjs-apps-in-typescript-265c" data-preload-image="" id="article-link-2093402"> Is NextPage necessary when building NextJS apps in TypeScript </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/pfedprog/is-nextpage-necessary-when-building-nextjs-apps-in-typescript-265c#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Is NextPage necessary when building NextJS apps in TypeScript"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4kepl3jc7rnffmxx4of1i0mqyz621jl" class="crayons-icon"><title id="a4kepl3jc7rnffmxx4of1i0mqyz621jl">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2093402" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2093402" data-article-author-id="763169" aria-label="Save post Is NextPage necessary when building NextJS apps in TypeScript to reading list" title="Save post Is NextPage necessary when building NextJS apps in TypeScript to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2092756" data-content-user-id="1588222"> <a href="/abdur_rakibrony_97cea0e9/building-a-full-stack-user-management-system-with-nextjs-14-graphql-prisma-and-postgresql-34ma" aria-labelledby="article-link-2092756" class="crayons-story__hidden-navigation-link">Building a Full-Stack User Management System with Next.js 14, GraphQL, Prisma, and PostgreSQL</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/abdur_rakibrony_97cea0e9" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1588222%2F84292356-f3b8-40d3-aefd-09e0f23cc721.png" alt="abdur_rakibrony_97cea0e9 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/abdur_rakibrony_97cea0e9" class="crayons-story__secondary fw-medium m:hidden"> Abdur Rakib Rony </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2092756" aria-controls="story-author-preview-content-2092756" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Abdur Rakib Rony profile details"> Abdur Rakib Rony </button> <div id="story-author-preview-content-2092756" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/abdur_rakibrony_97cea0e9" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1588222%2F84292356-f3b8-40d3-aefd-09e0f23cc721.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Abdur Rakib Rony</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1588222,"className":"User","name":"Abdur Rakib Rony"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1588222"></div> </div> </div> </div> </div> <a href="/abdur_rakibrony_97cea0e9/building-a-full-stack-user-management-system-with-nextjs-14-graphql-prisma-and-postgresql-34ma" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-10T13:07:36Z">Nov 10</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731244056"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/abdur_rakibrony_97cea0e9/building-a-full-stack-user-management-system-with-nextjs-14-graphql-prisma-and-postgresql-34ma" data-preload-image="" id="article-link-2092756"> Building a Full-Stack User Management System with Next.js 14, GraphQL, Prisma, and PostgreSQL </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(23, 30, 38, 0.10); --tag-prefix: #171e26; --tag-bg-hover: rgba(23, 30, 38, 0.10); --tag-prefix-hover: #171e26; " href="/t/graphql"><span class="crayons-tag__prefix">#</span>graphql</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(237, 21, 86, 0.10); --tag-prefix: #ED1556; --tag-bg-hover: rgba(237, 21, 86, 0.10); --tag-prefix-hover: #ED1556; " href="/t/postgres"><span class="crayons-tag__prefix">#</span>postgres</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(76, 81, 191, 0.10); --tag-prefix: #4C51BF; --tag-bg-hover: rgba(76, 81, 191, 0.10); --tag-prefix-hover: #4C51BF; " href="/t/prisma"><span class="crayons-tag__prefix">#</span>prisma</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/abdur_rakibrony_97cea0e9/building-a-full-stack-user-management-system-with-nextjs-14-graphql-prisma-and-postgresql-34ma#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building a Full-Stack User Management System with Next.js 14, GraphQL, Prisma, and PostgreSQL"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a94ntb5t5q01p92otswvbcjhbv5y5k75" class="crayons-icon"><title id="a94ntb5t5q01p92otswvbcjhbv5y5k75">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 6 min read </small> <button type="button" id="article-save-button-2092756" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2092756" data-article-author-id="1588222" aria-label="Save post Building a Full-Stack User Management System with Next.js 14, GraphQL, Prisma, and PostgreSQL to reading list" title="Save post Building a Full-Stack User Management System with Next.js 14, GraphQL, Prisma, and PostgreSQL to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2112235" data-content-user-id="867577"> <a href="/arjuncodess/analyzr-instant-analytics-for-your-apps-4ccb" aria-labelledby="article-link-2112235" class="crayons-story__hidden-navigation-link">How and Why I Built Analyzr: A Lightweight, Real-Time Analytics Tool 🚀📊</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/arjuncodess" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F867577%2Fe5eae5e9-84be-4125-b040-1895eea1b12f.jpeg" alt="arjuncodess profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/arjuncodess" class="crayons-story__secondary fw-medium m:hidden"> Arjun Vijay Prakash </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2112235" aria-controls="story-author-preview-content-2112235" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Arjun Vijay Prakash profile details"> Arjun Vijay Prakash </button> <div id="story-author-preview-content-2112235" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/arjuncodess" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F867577%2Fe5eae5e9-84be-4125-b040-1895eea1b12f.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Arjun Vijay Prakash</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":867577,"className":"User","name":"Arjun Vijay Prakash"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="867577"></div> </div> </div> </div> </div> <a href="/arjuncodess/analyzr-instant-analytics-for-your-apps-4ccb" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-22T18:31:00Z">Nov 22</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732300260"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/arjuncodess/analyzr-instant-analytics-for-your-apps-4ccb" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp8saolsh4u8cwmcjak1u.png" id="article-link-2112235"> How and Why I Built Analyzr: A Lightweight, Real-Time Analytics Tool 🚀📊 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(17, 17, 17, 0.10); --tag-prefix: #111111; --tag-bg-hover: rgba(17, 17, 17, 0.10); --tag-prefix-hover: #111111; " href="/t/news"><span class="crayons-tag__prefix">#</span>news</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/arjuncodess/analyzr-instant-analytics-for-your-apps-4ccb" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2112235" aria-label="Add a comment to post - How and Why I Built Analyzr: A Lightweight, Real-Time Analytics Tool 🚀📊"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">9<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/arjuncodess/analyzr-instant-analytics-for-your-apps-4ccb#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How and Why I Built Analyzr: A Lightweight, Real-Time Analytics Tool 🚀📊"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acflz3ghzxi5eptszy0bfon7tn3icojh" class="crayons-icon"><title id="acflz3ghzxi5eptszy0bfon7tn3icojh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 9 min read </small> <button type="button" id="article-save-button-2112235" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2112235" data-article-author-id="867577" aria-label="Save post How and Why I Built Analyzr: A Lightweight, Real-Time Analytics Tool 🚀📊 to reading list" title="Save post How and Why I Built Analyzr: A Lightweight, Real-Time Analytics Tool 🚀📊 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2089189" data-content-user-id="1559796"> <a href="/anisriva/centralized-api-logic-in-nextjs-with-an-external-backend-50en" aria-labelledby="article-link-2089189" class="crayons-story__hidden-navigation-link">Centralized API Logic in Next.js with an External Backend</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/anisriva" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1559796%2Fc59036cf-3c42-437c-a60e-550930eaf36d.jpg" alt="anisriva profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/anisriva" class="crayons-story__secondary fw-medium m:hidden"> Animesh Srivastava </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2089189" aria-controls="story-author-preview-content-2089189" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Animesh Srivastava profile details"> Animesh Srivastava </button> <div id="story-author-preview-content-2089189" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/anisriva" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1559796%2Fc59036cf-3c42-437c-a60e-550930eaf36d.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Animesh Srivastava</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1559796,"className":"User","name":"Animesh Srivastava"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1559796"></div> </div> </div> </div> </div> <a href="/anisriva/centralized-api-logic-in-nextjs-with-an-external-backend-50en" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-09T08:21:27Z">Nov 9</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731140487"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/anisriva/centralized-api-logic-in-nextjs-with-an-external-backend-50en" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkzr72llrvrvdor3jf0nq.jpg" id="article-link-2089189"> Centralized API Logic in Next.js with an External Backend </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/cleancoding"><span class="crayons-tag__prefix">#</span>cleancoding</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/anisriva/centralized-api-logic-in-nextjs-with-an-external-backend-50en#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Centralized API Logic in Next.js with an External Backend"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aly2i2vcuhogu4c9eb3eqcyf4dv6cloh" class="crayons-icon"><title id="aly2i2vcuhogu4c9eb3eqcyf4dv6cloh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2089189" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2089189" data-article-author-id="1559796" aria-label="Save post Centralized API Logic in Next.js with an External Backend to reading list" title="Save post Centralized API Logic in Next.js with an External Backend to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2115636" data-content-user-id="1769655"> <a href="/karthikmudunuri/coming-soon-eldora-20-the-future-of-page-design-18ce" aria-labelledby="article-link-2115636" class="crayons-story__hidden-navigation-link">🚀 Coming Soon: Eldora 2.0 – The Future of Page Design</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/karthikmudunuri" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1769655%2Ffbe6961d-bc85-453e-8f5d-ebd4e4e6380a.jpeg" alt="karthikmudunuri profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/karthikmudunuri" class="crayons-story__secondary fw-medium m:hidden"> Mudunuri bhaskara karthikeya varma </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2115636" aria-controls="story-author-preview-content-2115636" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Mudunuri bhaskara karthikeya varma profile details"> Mudunuri bhaskara karthikeya varma </button> <div id="story-author-preview-content-2115636" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/karthikmudunuri" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1769655%2Ffbe6961d-bc85-453e-8f5d-ebd4e4e6380a.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Mudunuri bhaskara karthikeya varma</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1769655,"className":"User","name":"Mudunuri bhaskara karthikeya varma"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1769655"></div> </div> </div> </div> </div> <a href="/karthikmudunuri/coming-soon-eldora-20-the-future-of-page-design-18ce" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-21T15:54:51Z">Nov 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732204491"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/karthikmudunuri/coming-soon-eldora-20-the-future-of-page-design-18ce" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj3lns7omw4fb99kd9q8c.png" id="article-link-2115636"> 🚀 Coming Soon: Eldora 2.0 – The Future of Page Design </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/karthikmudunuri/coming-soon-eldora-20-the-future-of-page-design-18ce" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2115636" aria-label="Add a comment to post - 🚀 Coming Soon: Eldora 2.0 – The Future of Page Design"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/karthikmudunuri/coming-soon-eldora-20-the-future-of-page-design-18ce#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🚀 Coming Soon: Eldora 2.0 – The Future of Page Design"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="anulrt1eb37i6q2mphi32jpy5kulhg70" class="crayons-icon"><title id="anulrt1eb37i6q2mphi32jpy5kulhg70">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2115636" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2115636" data-article-author-id="1769655" aria-label="Save post 🚀 Coming Soon: Eldora 2.0 – The Future of Page Design to reading list" title="Save post 🚀 Coming Soon: Eldora 2.0 – The Future of Page Design to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2084184" data-content-user-id="1977023"> <a href="/56_kode/tech-watch-3-4fob" aria-labelledby="article-link-2084184" class="crayons-story__hidden-navigation-link">Tech Watch 3</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/56_kode" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1977023%2F5a3b1324-dc73-4d14-90d0-625f44a63f47.jpg" alt="56_kode profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/56_kode" class="crayons-story__secondary fw-medium m:hidden"> 56kode </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2084184" aria-controls="story-author-preview-content-2084184" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="56kode profile details"> 56kode </button> <div id="story-author-preview-content-2084184" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/56_kode" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1977023%2F5a3b1324-dc73-4d14-90d0-625f44a63f47.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">56kode</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1977023,"className":"User","name":"56kode"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1977023"></div> </div> </div> </div> </div> <a href="/56_kode/tech-watch-3-4fob" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-07T14:46:22Z">Nov 7</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730990782"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/56_kode/tech-watch-3-4fob" data-preload-image="" id="article-link-2084184"> Tech Watch 3 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(245, 57, 0, 0.10); --tag-prefix: #F53900; --tag-bg-hover: rgba(245, 57, 0, 0.10); --tag-prefix-hover: #F53900; " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/56_kode/tech-watch-3-4fob" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2084184" aria-label="Add a comment to post - Tech Watch 3"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/56_kode/tech-watch-3-4fob#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Tech Watch 3"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4cldu8z2wqf968z8xab7mdxei4xecuj" class="crayons-icon"><title id="a4cldu8z2wqf968z8xab7mdxei4xecuj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2084184" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2084184" data-article-author-id="1977023" aria-label="Save post Tech Watch 3 to reading list" title="Save post Tech Watch 3 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2113134" data-content-user-id="827318"> <a href="/linkb15/top-5-git-based-cms-comparison-as-of-april-2024-4k1e" aria-labelledby="article-link-2113134" class="crayons-story__hidden-navigation-link">Top 5 Git-based CMS Comparison (As of April 2024)</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/linkb15" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F827318%2Ff381febe-4fb1-4632-90cd-1c7b2159d100.png" alt="linkb15 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/linkb15" class="crayons-story__secondary fw-medium m:hidden"> Borris </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2113134" aria-controls="story-author-preview-content-2113134" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Borris profile details"> Borris </button> <div id="story-author-preview-content-2113134" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/linkb15" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F827318%2Ff381febe-4fb1-4632-90cd-1c7b2159d100.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Borris</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":827318,"className":"User","name":"Borris"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="827318"></div> </div> </div> </div> </div> <a href="/linkb15/top-5-git-based-cms-comparison-as-of-april-2024-4k1e" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-20T06:13:39Z">Nov 20</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732083219"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/linkb15/top-5-git-based-cms-comparison-as-of-april-2024-4k1e" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8dxwnc8ksyxvfseb36h.png" id="article-link-2113134"> Top 5 Git-based CMS Comparison (As of April 2024) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/github"><span class="crayons-tag__prefix">#</span>github</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/linkb15/top-5-git-based-cms-comparison-as-of-april-2024-4k1e" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2113134" aria-label="Add a comment to post - Top 5 Git-based CMS Comparison (As of April 2024)"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/linkb15/top-5-git-based-cms-comparison-as-of-april-2024-4k1e#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Top 5 Git-based CMS Comparison (As of April 2024)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ad5oj5b5ym4zzaqpxj8i7ac419dvh6br" class="crayons-icon"><title id="ad5oj5b5ym4zzaqpxj8i7ac419dvh6br">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2113134" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2113134" data-article-author-id="827318" aria-label="Save post Top 5 Git-based CMS Comparison (As of April 2024) to reading list" title="Save post Top 5 Git-based CMS Comparison (As of April 2024) to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2081578" data-content-user-id="155583"> <a href="/alixwang/building-an-ai-cron-builder-with-cloudflare-pages-and-nextjs-11lb" aria-labelledby="article-link-2081578" class="crayons-story__hidden-navigation-link">Building an AI Cron Builder with Cloudflare Pages and Next.js</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/alixwang" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F155583%2F4ade2f21-9d92-4e9a-b31d-2e3de8450a44.jpeg" alt="alixwang profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/alixwang" class="crayons-story__secondary fw-medium m:hidden"> AlixWang </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2081578" aria-controls="story-author-preview-content-2081578" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="AlixWang profile details"> AlixWang </button> <div id="story-author-preview-content-2081578" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alixwang" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F155583%2F4ade2f21-9d92-4e9a-b31d-2e3de8450a44.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">AlixWang</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":155583,"className":"User","name":"AlixWang"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="155583"></div> </div> </div> </div> </div> <a href="/alixwang/building-an-ai-cron-builder-with-cloudflare-pages-and-nextjs-11lb" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-06T16:23:09Z">Nov 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730910189"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/alixwang/building-an-ai-cron-builder-with-cloudflare-pages-and-nextjs-11lb" data-preload-image="" id="article-link-2081578"> Building an AI Cron Builder with Cloudflare Pages and Next.js </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(23, 253, 26, 0.10); --tag-prefix: #17fd1a; --tag-bg-hover: rgba(23, 253, 26, 0.10); --tag-prefix-hover: #17fd1a; " href="/t/ai"><span class="crayons-tag__prefix">#</span>ai</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/cloudflare"><span class="crayons-tag__prefix">#</span>cloudflare</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/pages"><span class="crayons-tag__prefix">#</span>pages</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/alixwang/building-an-ai-cron-builder-with-cloudflare-pages-and-nextjs-11lb" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2081578" aria-label="Add a comment to post - Building an AI Cron Builder with Cloudflare Pages and Next.js"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/alixwang/building-an-ai-cron-builder-with-cloudflare-pages-and-nextjs-11lb#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Building an AI Cron Builder with Cloudflare Pages and Next.js"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ao636rg1bqoaf3uk6ud5rm1hegg2qtx" class="crayons-icon"><title id="ao636rg1bqoaf3uk6ud5rm1hegg2qtx">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2081578" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2081578" data-article-author-id="155583" aria-label="Save post Building an AI Cron Builder with Cloudflare Pages and Next.js to reading list" title="Save post Building an AI Cron Builder with Cloudflare Pages and Next.js to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2080935" data-content-user-id="894033"> <a href="/khaled17/methodical-naming-in-react-how-it-improves-code-organization-8dp" aria-labelledby="article-link-2080935" class="crayons-story__hidden-navigation-link">Methodical Naming in React: How It Improves Code Organization</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/khaled17" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F894033%2Fd28dba39-50f9-47c0-a7a3-d156346d6996.jpeg" alt="khaled17 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/khaled17" class="crayons-story__secondary fw-medium m:hidden"> khaled-17 </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2080935" aria-controls="story-author-preview-content-2080935" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="khaled-17 profile details"> khaled-17 </button> <div id="story-author-preview-content-2080935" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/khaled17" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F894033%2Fd28dba39-50f9-47c0-a7a3-d156346d6996.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">khaled-17</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":894033,"className":"User","name":"khaled-17"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="894033"></div> </div> </div> </div> </div> <a href="/khaled17/methodical-naming-in-react-how-it-improves-code-organization-8dp" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-06T09:58:36Z">Nov 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730887116"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/khaled17/methodical-naming-in-react-how-it-improves-code-organization-8dp" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fta4p52czpve9lvli77q8.png" id="article-link-2080935"> Methodical Naming in React: How It Improves Code Organization </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/cleancoding"><span class="crayons-tag__prefix">#</span>cleancoding</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/khaled17/methodical-naming-in-react-how-it-improves-code-organization-8dp#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Methodical Naming in React: How It Improves Code Organization"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3frc0ucnz79l70ejrvhnm3zfnzr8vit" class="crayons-icon"><title id="a3frc0ucnz79l70ejrvhnm3zfnzr8vit">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2080935" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2080935" data-article-author-id="894033" aria-label="Save post Methodical Naming in React: How It Improves Code Organization to reading list" title="Save post Methodical Naming in React: How It Improves Code Organization to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2093314" data-content-user-id="1336316"> <a href="/seyedahmaddv/how-single-page-applications-spas-can-boost-visitor-to-customer-conversion-rates-16aa" aria-labelledby="article-link-2093314" class="crayons-story__hidden-navigation-link">How Single Page Applications (SPAs) Can Boost Visitor-to-Customer Conversion Rates</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/seyedahmaddv" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1336316%2F3b79e96c-fc30-411f-949d-8083b829ab3a.jpg" alt="seyedahmaddv profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/seyedahmaddv" class="crayons-story__secondary fw-medium m:hidden"> Seyed Ahmad </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2093314" aria-controls="story-author-preview-content-2093314" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Seyed Ahmad profile details"> Seyed Ahmad </button> <div id="story-author-preview-content-2093314" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/seyedahmaddv" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1336316%2F3b79e96c-fc30-411f-949d-8083b829ab3a.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Seyed Ahmad</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1336316,"className":"User","name":"Seyed Ahmad"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1336316"></div> </div> </div> </div> </div> <a href="/seyedahmaddv/how-single-page-applications-spas-can-boost-visitor-to-customer-conversion-rates-16aa" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-10T18:18:14Z">Nov 10</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731262694"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/seyedahmaddv/how-single-page-applications-spas-can-boost-visitor-to-customer-conversion-rates-16aa" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7zowf3nvhdgscflgicz.jpg" id="article-link-2093314"> How Single Page Applications (SPAs) Can Boost Visitor-to-Customer Conversion Rates </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/seyedahmaddv/how-single-page-applications-spas-can-boost-visitor-to-customer-conversion-rates-16aa" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2093314" aria-label="Add a comment to post - How Single Page Applications (SPAs) Can Boost Visitor-to-Customer Conversion Rates"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/seyedahmaddv/how-single-page-applications-spas-can-boost-visitor-to-customer-conversion-rates-16aa#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How Single Page Applications (SPAs) Can Boost Visitor-to-Customer Conversion Rates"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abnr95vfkn0oc9qcta8ffzo3v3kqywsi" class="crayons-icon"><title id="abnr95vfkn0oc9qcta8ffzo3v3kqywsi">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2093314" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2093314" data-article-author-id="1336316" aria-label="Save post How Single Page Applications (SPAs) Can Boost Visitor-to-Customer Conversion Rates to reading list" title="Save post How Single Page Applications (SPAs) Can Boost Visitor-to-Customer Conversion Rates to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2080139" data-content-user-id="128419"> <a href="/xuho/feedback-glow-canny-alternative-for-indie-makers-and-small-teams-4dk2" aria-labelledby="article-link-2080139" class="crayons-story__hidden-navigation-link">Feedback Glow - Canny alternative for indie makers and small teams</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/xuho" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F128419%2Ff400d6f5-4596-4982-948f-8983bd61e9e5.jpeg" alt="xuho profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/xuho" class="crayons-story__secondary fw-medium m:hidden"> Nguyen Xuan hoa </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2080139" aria-controls="story-author-preview-content-2080139" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nguyen Xuan hoa profile details"> Nguyen Xuan hoa </button> <div id="story-author-preview-content-2080139" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/xuho" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F128419%2Ff400d6f5-4596-4982-948f-8983bd61e9e5.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nguyen Xuan hoa</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":128419,"className":"User","name":"Nguyen Xuan hoa"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="128419"></div> </div> </div> </div> </div> <a href="/xuho/feedback-glow-canny-alternative-for-indie-makers-and-small-teams-4dk2" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-06T02:34:57Z">Nov 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730860497"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/xuho/feedback-glow-canny-alternative-for-indie-makers-and-small-teams-4dk2" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ej3b0fyt2p5y6ddpvk2.jpeg" id="article-link-2080139"> Feedback Glow - Canny alternative for indie makers and small teams </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(220, 45, 23, 0.10); --tag-prefix: #dc2d17; --tag-bg-hover: rgba(220, 45, 23, 0.10); --tag-prefix-hover: #dc2d17; " href="/t/laravel"><span class="crayons-tag__prefix">#</span>laravel</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/sideprojects"><span class="crayons-tag__prefix">#</span>sideprojects</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(170, 255, 236, 0.10); --tag-prefix: #aaffec; --tag-bg-hover: rgba(170, 255, 236, 0.10); --tag-prefix-hover: #aaffec; " href="/t/saas"><span class="crayons-tag__prefix">#</span>saas</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/xuho/feedback-glow-canny-alternative-for-indie-makers-and-small-teams-4dk2#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Feedback Glow - Canny alternative for indie makers and small teams"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9akvv57rwbfoz3uidw1i4gc0wds36hg" class="crayons-icon"><title id="a9akvv57rwbfoz3uidw1i4gc0wds36hg">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2080139" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2080139" data-article-author-id="128419" aria-label="Save post Feedback Glow - Canny alternative for indie makers and small teams to reading list" title="Save post Feedback Glow - Canny alternative for indie makers and small teams to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2035229" data-content-user-id="803632"> <a href="/jorgeagoiz/nextjs-docker-and-ip-geolocation-1al1" aria-labelledby="article-link-2035229" class="crayons-story__hidden-navigation-link">NextJs, Docker and IP Geolocation</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/jorgeagoiz" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F803632%2F246e4551-bc5a-45d8-b9a7-487820717cf9.jpeg" alt="jorgeagoiz profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/jorgeagoiz" class="crayons-story__secondary fw-medium m:hidden"> Jorge </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2035229" aria-controls="story-author-preview-content-2035229" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Jorge profile details"> Jorge </button> <div id="story-author-preview-content-2035229" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/jorgeagoiz" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F803632%2F246e4551-bc5a-45d8-b9a7-487820717cf9.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jorge</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":803632,"className":"User","name":"Jorge"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="803632"></div> </div> </div> </div> </div> <a href="/jorgeagoiz/nextjs-docker-and-ip-geolocation-1al1" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-09T20:20:33Z">Nov 9</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731183633"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/jorgeagoiz/nextjs-docker-and-ip-geolocation-1al1" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxhblvnza8otflowc9rc5.jpg" id="article-link-2035229"> NextJs, Docker and IP Geolocation </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(29, 99, 237, 0.10); --tag-prefix: #1D63ED; --tag-bg-hover: rgba(29, 99, 237, 0.10); --tag-prefix-hover: #1D63ED; " href="/t/docker"><span class="crayons-tag__prefix">#</span>docker</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/maxmind"><span class="crayons-tag__prefix">#</span>maxmind</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/geolocation"><span class="crayons-tag__prefix">#</span>geolocation</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/jorgeagoiz/nextjs-docker-and-ip-geolocation-1al1" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2035229" aria-label="Add a comment to post - NextJs, Docker and IP Geolocation"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/jorgeagoiz/nextjs-docker-and-ip-geolocation-1al1#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - NextJs, Docker and IP Geolocation"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6vj58csbhjn1e4iuj0xv9i9epeotrz4" class="crayons-icon"><title id="a6vj58csbhjn1e4iuj0xv9i9epeotrz4">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2035229" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2035229" data-article-author-id="803632" aria-label="Save post NextJs, Docker and IP Geolocation to reading list" title="Save post NextJs, Docker and IP Geolocation to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2076959" data-content-user-id="1239415"> <a href="/saeedniyabati/boost-your-react-apps-performance-with-memoization-exploring-usememo-usecallback-and-reactmemo-35p1" aria-labelledby="article-link-2076959" class="crayons-story__hidden-navigation-link">Boost Your React App's Performance with Memoization: Exploring useMemo, useCallback, and React.memo</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/saeedniyabati" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1239415%2F23b055af-3906-4f65-b604-593cd26a307e.png" alt="saeedniyabati profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/saeedniyabati" class="crayons-story__secondary fw-medium m:hidden"> Saeed Niyabati </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2076959" aria-controls="story-author-preview-content-2076959" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Saeed Niyabati profile details"> Saeed Niyabati </button> <div id="story-author-preview-content-2076959" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/saeedniyabati" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1239415%2F23b055af-3906-4f65-b604-593cd26a307e.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Saeed Niyabati</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1239415,"className":"User","name":"Saeed Niyabati"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1239415"></div> </div> </div> </div> </div> <a href="/saeedniyabati/boost-your-react-apps-performance-with-memoization-exploring-usememo-usecallback-and-reactmemo-35p1" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-04T17:08:08Z">Nov 4</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730740088"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/saeedniyabati/boost-your-react-apps-performance-with-memoization-exploring-usememo-usecallback-and-reactmemo-35p1" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fepdg1hxvqx9zj6slzbcc.png" id="article-link-2076959"> Boost Your React App's Performance with Memoization: Exploring useMemo, useCallback, and React.memo </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/saeedniyabati/boost-your-react-apps-performance-with-memoization-exploring-usememo-usecallback-and-reactmemo-35p1#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Boost Your React App's Performance with Memoization: Exploring useMemo, useCallback, and React.memo"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9f9k3vus066kct1t5pgxk6lg8zb8ffl" class="crayons-icon"><title id="a9f9k3vus066kct1t5pgxk6lg8zb8ffl">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2076959" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2076959" data-article-author-id="1239415" aria-label="Save post Boost Your React App's Performance with Memoization: Exploring useMemo, useCallback, and React.memo to reading list" title="Save post Boost Your React App's Performance with Memoization: Exploring useMemo, useCallback, and React.memo to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2087039" data-content-user-id="1320259"> <a href="/joodi/understanding-the-javascript-event-loop-3mfk" aria-labelledby="article-link-2087039" class="crayons-story__hidden-navigation-link">Understanding the JavaScript Event Loop 🔄</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/joodi" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1320259%2Fcf5661b9-1a87-46bd-ac45-5fc6813c7237.png" alt="joodi profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/joodi" class="crayons-story__secondary fw-medium m:hidden"> Joodi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2087039" aria-controls="story-author-preview-content-2087039" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Joodi profile details"> Joodi </button> <div id="story-author-preview-content-2087039" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/joodi" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1320259%2Fcf5661b9-1a87-46bd-ac45-5fc6813c7237.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Joodi</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1320259,"className":"User","name":"Joodi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1320259"></div> </div> </div> </div> </div> <a href="/joodi/understanding-the-javascript-event-loop-3mfk" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-08T15:30:36Z">Nov 8</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731079836"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/joodi/understanding-the-javascript-event-loop-3mfk" data-preload-image="" id="article-link-2087039"> Understanding the JavaScript Event Loop 🔄 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/eventloop"><span class="crayons-tag__prefix">#</span>eventloop</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/joodi/understanding-the-javascript-event-loop-3mfk#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Understanding the JavaScript Event Loop 🔄"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amrc16443gn9xmql4rsaa8r0g64ozse0" class="crayons-icon"><title id="amrc16443gn9xmql4rsaa8r0g64ozse0">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2087039" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2087039" data-article-author-id="1320259" aria-label="Save post Understanding the JavaScript Event Loop 🔄 to reading list" title="Save post Understanding the JavaScript Event Loop 🔄 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2083052" data-content-user-id="334096"> <a href="/torver213/dark-mode-light-mode-in-next-js-14-app-router-with-material-ui-without-ui-flickering-4flk" aria-labelledby="article-link-2083052" class="crayons-story__hidden-navigation-link">Dark mode & light mode in next. Js 14 app router with material-ui without ui flickering</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/torver213" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F334096%2F3676320c-b426-4c46-afbb-0cb47e18ae01.jpg" alt="torver213 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/torver213" class="crayons-story__secondary fw-medium m:hidden"> Peter Kelvin Torver </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2083052" aria-controls="story-author-preview-content-2083052" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Peter Kelvin Torver profile details"> Peter Kelvin Torver </button> <div id="story-author-preview-content-2083052" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/torver213" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F334096%2F3676320c-b426-4c46-afbb-0cb47e18ae01.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Peter Kelvin Torver</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":334096,"className":"User","name":"Peter Kelvin Torver"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="334096"></div> </div> </div> </div> </div> <a href="/torver213/dark-mode-light-mode-in-next-js-14-app-router-with-material-ui-without-ui-flickering-4flk" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-07T06:57:54Z">Nov 7</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730962674"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/torver213/dark-mode-light-mode-in-next-js-14-app-router-with-material-ui-without-ui-flickering-4flk" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fugmgh7nqee6nvb7hp7j0.png" id="article-link-2083052"> Dark mode & light mode in next. Js 14 app router with material-ui without ui flickering </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/mui"><span class="crayons-tag__prefix">#</span>mui</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/torver213/dark-mode-light-mode-in-next-js-14-app-router-with-material-ui-without-ui-flickering-4flk#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Dark mode & light mode in next. Js 14 app router with material-ui without ui flickering"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3bsec12mp7jjlev82d9zb3z82x9zh05" class="crayons-icon"><title id="a3bsec12mp7jjlev82d9zb3z82x9zh05">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> <button type="button" id="article-save-button-2083052" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2083052" data-article-author-id="334096" aria-label="Save post Dark mode & light mode in next. Js 14 app router with material-ui without ui flickering to reading list" title="Save post Dark mode & light mode in next. Js 14 app router with material-ui without ui flickering to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2072145" data-content-user-id="1796559"> <a href="/_ab56e9bbfaff3a478352a/escape-road-unblocked-a-browser-based-police-chase-game-with-nextjs-14-2im6" aria-labelledby="article-link-2072145" class="crayons-story__hidden-navigation-link">Escape Road Unblocked: A Browser-Based Police Chase Game with Next.js 14</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/_ab56e9bbfaff3a478352a" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1796559%2F2febab85-18aa-48ab-8685-40b272f4fbb7.png" alt="_ab56e9bbfaff3a478352a profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/_ab56e9bbfaff3a478352a" class="crayons-story__secondary fw-medium m:hidden"> 陈宇翔 </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2072145" aria-controls="story-author-preview-content-2072145" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="陈宇翔 profile details"> 陈宇翔 </button> <div id="story-author-preview-content-2072145" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/_ab56e9bbfaff3a478352a" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1796559%2F2febab85-18aa-48ab-8685-40b272f4fbb7.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">陈宇翔</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1796559,"className":"User","name":"陈宇翔"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1796559"></div> </div> </div> </div> </div> <a href="/_ab56e9bbfaff3a478352a/escape-road-unblocked-a-browser-based-police-chase-game-with-nextjs-14-2im6" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-02T08:43:22Z">Nov 2</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730537002"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/_ab56e9bbfaff3a478352a/escape-road-unblocked-a-browser-based-police-chase-game-with-nextjs-14-2im6" data-preload-image="" id="article-link-2072145"> Escape Road Unblocked: A Browser-Based Police Chase Game with Next.js 14 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(51, 132, 217, 0.10); --tag-prefix: #3384d9; --tag-bg-hover: rgba(51, 132, 217, 0.10); --tag-prefix-hover: #3384d9; " href="/t/gamedev"><span class="crayons-tag__prefix">#</span>gamedev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/_ab56e9bbfaff3a478352a/escape-road-unblocked-a-browser-based-police-chase-game-with-nextjs-14-2im6#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Escape Road Unblocked: A Browser-Based Police Chase Game with Next.js 14"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alqmlo6cgfbqqz7q17dp0dmd1l6ouzcj" class="crayons-icon"><title id="alqmlo6cgfbqqz7q17dp0dmd1l6ouzcj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2072145" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2072145" data-article-author-id="1796559" aria-label="Save post Escape Road Unblocked: A Browser-Based Police Chase Game with Next.js 14 to reading list" title="Save post Escape Road Unblocked: A Browser-Based Police Chase Game with Next.js 14 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2114136" data-content-user-id="965723"> <a href="/arindam_1729/build-a-real-time-collaborative-editor-with-nextjs-appwrite-and-permitio-a7j" aria-labelledby="article-link-2114136" class="crayons-story__hidden-navigation-link">Build a Real-Time Collaborative Editor with Next.js, Appwrite, and Permit.io</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/arindam_1729" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F965723%2Fe0982512-4de1-4154-b3c3-1869d19e9ecc.png" alt="arindam_1729 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/arindam_1729" class="crayons-story__secondary fw-medium m:hidden"> Arindam Majumder </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2114136" aria-controls="story-author-preview-content-2114136" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Arindam Majumder profile details"> Arindam Majumder <a style="display: inline;" href="/++"><img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" /></a> </button> <div id="story-author-preview-content-2114136" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/arindam_1729" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F965723%2Fe0982512-4de1-4154-b3c3-1869d19e9ecc.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Arindam Majumder </span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":965723,"className":"User","name":"Arindam Majumder "}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="965723"></div> </div> </div> </div> </div> <a href="/arindam_1729/build-a-real-time-collaborative-editor-with-nextjs-appwrite-and-permitio-a7j" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-21T04:21:41Z">Nov 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732162901"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/arindam_1729/build-a-real-time-collaborative-editor-with-nextjs-appwrite-and-permitio-a7j" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7j0cal4r6wj9tmkr2bp1.gif" id="article-link-2114136"> Build a Real-Time Collaborative Editor with Next.js, Appwrite, and Permit.io </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/arindam_1729/build-a-real-time-collaborative-editor-with-nextjs-appwrite-and-permitio-a7j" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2114136" aria-label="Add a comment to post - Build a Real-Time Collaborative Editor with Next.js, Appwrite, and Permit.io"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">63<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/arindam_1729/build-a-real-time-collaborative-editor-with-nextjs-appwrite-and-permitio-a7j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Build a Real-Time Collaborative Editor with Next.js, Appwrite, and Permit.io"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aj1awfro7a2wd4mmg8jmgztuciobltm1" class="crayons-icon"><title id="aj1awfro7a2wd4mmg8jmgztuciobltm1">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 6<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 37 min read </small> <button type="button" id="article-save-button-2114136" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2114136" data-article-author-id="965723" aria-label="Save post Build a Real-Time Collaborative Editor with Next.js, Appwrite, and Permit.io to reading list" title="Save post Build a Real-Time Collaborative Editor with Next.js, Appwrite, and Permit.io to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2070492" data-content-user-id="392818"> <a href="/thinkthroo/httpbatchlink-types-in-trpc-source-code-explained-2gnn" aria-labelledby="article-link-2070492" class="crayons-story__hidden-navigation-link">httpBatchLink types in tRPC source code explained</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/thinkthroo" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F392818%2F418f3503-dada-42b6-987f-fe7d9dd50ced.jpg" alt="thinkthroo profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/thinkthroo" class="crayons-story__secondary fw-medium m:hidden"> thinkThroo </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2070492" aria-controls="story-author-preview-content-2070492" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="thinkThroo profile details"> thinkThroo </button> <div id="story-author-preview-content-2070492" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/thinkthroo" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F392818%2F418f3503-dada-42b6-987f-fe7d9dd50ced.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">thinkThroo</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":392818,"className":"User","name":"thinkThroo"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="392818"></div> </div> </div> </div> </div> <a href="/thinkthroo/httpbatchlink-types-in-trpc-source-code-explained-2gnn" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-01T13:50:39Z">Nov 1</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730469039"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/thinkthroo/httpbatchlink-types-in-trpc-source-code-explained-2gnn" data-preload-image="" id="article-link-2070492"> httpBatchLink types in tRPC source code explained </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/trpc"><span class="crayons-tag__prefix">#</span>trpc</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/thinkthroo/httpbatchlink-types-in-trpc-source-code-explained-2gnn#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - httpBatchLink types in tRPC source code explained"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aaltyz8f780gm7s1avs3zi26262rmysn" class="crayons-icon"><title id="aaltyz8f780gm7s1avs3zi26262rmysn">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2070492" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2070492" data-article-author-id="392818" aria-label="Save post httpBatchLink types in tRPC source code explained to reading list" title="Save post httpBatchLink types in tRPC source code explained to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2070468" data-content-user-id="1741384"> <a href="/longlikun/zai-nextjs-zhong-wu-feng-ji-cheng-cloudflare-turnstile-da-zao-geng-an-quan-de-wang-zhan-26mh" aria-labelledby="article-link-2070468" class="crayons-story__hidden-navigation-link">在 Nextjs 中无缝集成 Cloudflare Turnstile</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/longlikun" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1741384%2F28577376-7292-44cd-9aa3-1666735b9e37.png" alt="longlikun profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/longlikun" class="crayons-story__secondary fw-medium m:hidden"> likun </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2070468" aria-controls="story-author-preview-content-2070468" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="likun profile details"> likun </button> <div id="story-author-preview-content-2070468" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/longlikun" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1741384%2F28577376-7292-44cd-9aa3-1666735b9e37.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">likun</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1741384,"className":"User","name":"likun"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1741384"></div> </div> </div> </div> </div> <a href="/longlikun/zai-nextjs-zhong-wu-feng-ji-cheng-cloudflare-turnstile-da-zao-geng-an-quan-de-wang-zhan-26mh" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-01T13:38:41Z">Nov 1</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730468321"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/longlikun/zai-nextjs-zhong-wu-feng-ji-cheng-cloudflare-turnstile-da-zao-geng-an-quan-de-wang-zhan-26mh" data-preload-image="" id="article-link-2070468"> 在 Nextjs 中无缝集成 Cloudflare Turnstile </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(254, 255, 165, 0.10); --tag-prefix: #FEFFA5; --tag-bg-hover: rgba(254, 255, 165, 0.10); --tag-prefix-hover: #FEFFA5; " href="/t/tutorial"><span class="crayons-tag__prefix">#</span>tutorial</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(244, 128, 31, 0.10); --tag-prefix: #F4801F; --tag-bg-hover: rgba(244, 128, 31, 0.10); --tag-prefix-hover: #F4801F; " href="/t/cloudflarechallenge"><span class="crayons-tag__prefix">#</span>cloudflarechallenge</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/longlikun/zai-nextjs-zhong-wu-feng-ji-cheng-cloudflare-turnstile-da-zao-geng-an-quan-de-wang-zhan-26mh#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 在 Nextjs 中无缝集成 Cloudflare Turnstile"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a7msp2inwr44azblfo92iqtvu25gdbk5" class="crayons-icon"><title id="a7msp2inwr44azblfo92iqtvu25gdbk5">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2070468" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2070468" data-article-author-id="1741384" aria-label="Save post 在 Nextjs 中无缝集成 Cloudflare Turnstile to reading list" title="Save post 在 Nextjs 中无缝集成 Cloudflare Turnstile to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2069357" data-content-user-id="1968096"> <a href="/asim_khan_cbe65e41bcbbc65/how-to-add-100-free-support-chat-to-your-application-with-tawkto-9ja" aria-labelledby="article-link-2069357" class="crayons-story__hidden-navigation-link">How to Add 100% Free Support Chat to Your Application with Tawk.to</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/asim_khan_cbe65e41bcbbc65" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1968096%2F2afb10e0-3abb-4c7e-b577-4302614e2b07.png" alt="asim_khan_cbe65e41bcbbc65 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/asim_khan_cbe65e41bcbbc65" class="crayons-story__secondary fw-medium m:hidden"> Asim khan </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2069357" aria-controls="story-author-preview-content-2069357" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Asim khan profile details"> Asim khan </button> <div id="story-author-preview-content-2069357" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/asim_khan_cbe65e41bcbbc65" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1968096%2F2afb10e0-3abb-4c7e-b577-4302614e2b07.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Asim khan</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1968096,"className":"User","name":"Asim khan"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1968096"></div> </div> </div> </div> </div> <a href="/asim_khan_cbe65e41bcbbc65/how-to-add-100-free-support-chat-to-your-application-with-tawkto-9ja" class="crayons-story__tertiary fs-xs"><time datetime="2024-10-31T19:41:14Z">Oct 31</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730403674"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/asim_khan_cbe65e41bcbbc65/how-to-add-100-free-support-chat-to-your-application-with-tawkto-9ja" data-preload-image="" id="article-link-2069357"> How to Add 100% Free Support Chat to Your Application with Tawk.to </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(118, 118, 118, 0.10); --tag-prefix: #767676; --tag-bg-hover: rgba(118, 118, 118, 0.10); --tag-prefix-hover: #767676; " href="/t/chatgpt"><span class="crayons-tag__prefix">#</span>chatgpt</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(175, 39, 242, 0.10); --tag-prefix: #af27f2; --tag-bg-hover: rgba(175, 39, 242, 0.10); --tag-prefix-hover: #af27f2; " href="/t/coding"><span class="crayons-tag__prefix">#</span>coding</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/asim_khan_cbe65e41bcbbc65/how-to-add-100-free-support-chat-to-your-application-with-tawkto-9ja#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How to Add 100% Free Support Chat to Your Application with Tawk.to"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aa31jeoppwx8thj5dkug0427phcxam55" class="crayons-icon"><title id="aa31jeoppwx8thj5dkug0427phcxam55">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2069357" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2069357" data-article-author-id="1968096" aria-label="Save post How to Add 100% Free Support Chat to Your Application with Tawk.to to reading list" title="Save post How to Add 100% Free Support Chat to Your Application with Tawk.to to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2103733" data-content-user-id="516118"> <a href="/sbabaeizadeh/--59dc" aria-labelledby="article-link-2103733" class="crayons-story__hidden-navigation-link">𝗨𝗻𝗹𝗼𝗰𝗸 𝗬𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽’𝘀 𝗣𝗼𝘁𝗲𝗻𝘁𝗶𝗮𝗹: 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗦𝗺𝗮𝗿𝘁 𝗗𝗮𝘁𝗮 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴!</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/sbabaeizadeh" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F516118%2F8302b5b4-cb2e-4187-8280-4202bb1d3f33.jpeg" alt="sbabaeizadeh profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/sbabaeizadeh" class="crayons-story__secondary fw-medium m:hidden"> s-babaeizadeh </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2103733" aria-controls="story-author-preview-content-2103733" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="s-babaeizadeh profile details"> s-babaeizadeh </button> <div id="story-author-preview-content-2103733" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/sbabaeizadeh" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F516118%2F8302b5b4-cb2e-4187-8280-4202bb1d3f33.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">s-babaeizadeh</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":516118,"className":"User","name":"s-babaeizadeh"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="516118"></div> </div> </div> </div> </div> <a href="/sbabaeizadeh/--59dc" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-14T07:24:54Z">Nov 14</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731569094"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/sbabaeizadeh/--59dc" data-preload-image="" id="article-link-2103733"> 𝗨𝗻𝗹𝗼𝗰𝗸 𝗬𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽’𝘀 𝗣𝗼𝘁𝗲𝗻𝘁𝗶𝗮𝗹: 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗦𝗺𝗮𝗿𝘁 𝗗𝗮𝘁𝗮 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴! </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/sbabaeizadeh/--59dc" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2103733" aria-label="Add a comment to post - 𝗨𝗻𝗹𝗼𝗰𝗸 𝗬𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽’𝘀 𝗣𝗼𝘁𝗲𝗻𝘁𝗶𝗮𝗹: 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗦𝗺𝗮𝗿𝘁 𝗗𝗮𝘁𝗮 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴!"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/sbabaeizadeh/--59dc#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 𝗨𝗻𝗹𝗼𝗰𝗸 𝗬𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽’𝘀 𝗣𝗼𝘁𝗲𝗻𝘁𝗶𝗮𝗹: 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗦𝗺𝗮𝗿𝘁 𝗗𝗮𝘁𝗮 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴!"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amw4o2021eju06wcmd8q014fe8buuctj" class="crayons-icon"><title id="amw4o2021eju06wcmd8q014fe8buuctj">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2103733" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2103733" data-article-author-id="516118" aria-label="Save post 𝗨𝗻𝗹𝗼𝗰𝗸 𝗬𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽’𝘀 𝗣𝗼𝘁𝗲𝗻𝘁𝗶𝗮𝗹: 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗦𝗺𝗮𝗿𝘁 𝗗𝗮𝘁𝗮 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴! to reading list" title="Save post 𝗨𝗻𝗹𝗼𝗰𝗸 𝗬𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽’𝘀 𝗣𝗼𝘁𝗲𝗻𝘁𝗶𝗮𝗹: 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗦𝗺𝗮𝗿𝘁 𝗗𝗮𝘁𝗮 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴! to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2102123" data-content-user-id="566275"> <a href="/strapi/epic-nextjs-15-tutorial-part-10-frontend-deployment-to-vercel-2d6c" aria-labelledby="article-link-2102123" class="crayons-story__hidden-navigation-link">Epic Next.js 15 Tutorial Part 10: Frontend Deployment To Vercel</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/strapi"> <img alt="Strapi logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F763%2F988af53b-5d7e-435a-98eb-dd4aff5299d2.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/paulbratslavsky" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F566275%2F8b26dec6-c249-4de2-9e0e-f8cf09e9e4ef.jpeg" alt="paulbratslavsky profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/paulbratslavsky" class="crayons-story__secondary fw-medium m:hidden"> Paul Bratslavsky </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2102123" aria-controls="story-author-preview-content-2102123" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Paul Bratslavsky profile details"> Paul Bratslavsky </button> <div id="story-author-preview-content-2102123" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/paulbratslavsky" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F566275%2F8b26dec6-c249-4de2-9e0e-f8cf09e9e4ef.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Paul Bratslavsky</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":566275,"className":"User","name":"Paul Bratslavsky"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="566275"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/strapi" class="crayons-story__secondary fw-medium">Strapi</a> </span> </div> <a href="/strapi/epic-nextjs-15-tutorial-part-10-frontend-deployment-to-vercel-2d6c" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-13T08:21:05Z">Nov 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731486065"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/strapi/epic-nextjs-15-tutorial-part-10-frontend-deployment-to-vercel-2d6c" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi3q281lpwbvtnssaqcsh.png" id="article-link-2102123"> Epic Next.js 15 Tutorial Part 10: Frontend Deployment To Vercel </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/strapi"><span class="crayons-tag__prefix">#</span>strapi</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/strapi/epic-nextjs-15-tutorial-part-10-frontend-deployment-to-vercel-2d6c" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2102123" aria-label="Add a comment to post - Epic Next.js 15 Tutorial Part 10: Frontend Deployment To Vercel"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/strapi/epic-nextjs-15-tutorial-part-10-frontend-deployment-to-vercel-2d6c#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Epic Next.js 15 Tutorial Part 10: Frontend Deployment To Vercel"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="abj67swv50vyfj21qcsufqu6tt4u7r40" class="crayons-icon"><title id="abj67swv50vyfj21qcsufqu6tt4u7r40">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 11 min read </small> <button type="button" id="article-save-button-2102123" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2102123" data-article-author-id="566275" aria-label="Save post Epic Next.js 15 Tutorial Part 10: Frontend Deployment To Vercel to reading list" title="Save post Epic Next.js 15 Tutorial Part 10: Frontend Deployment To Vercel to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2102125" data-content-user-id="566275"> <a href="/strapi/epic-nextjs-15-tutorial-part-9-backend-deployment-to-strapi-cloud-5fl5" aria-labelledby="article-link-2102125" class="crayons-story__hidden-navigation-link">Epic Next.js 15 Tutorial Part 9: Backend Deployment To Strapi Cloud</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/strapi"> <img alt="Strapi logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F763%2F988af53b-5d7e-435a-98eb-dd4aff5299d2.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/paulbratslavsky" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F566275%2F8b26dec6-c249-4de2-9e0e-f8cf09e9e4ef.jpeg" alt="paulbratslavsky profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/paulbratslavsky" class="crayons-story__secondary fw-medium m:hidden"> Paul Bratslavsky </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2102125" aria-controls="story-author-preview-content-2102125" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Paul Bratslavsky profile details"> Paul Bratslavsky </button> <div id="story-author-preview-content-2102125" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/paulbratslavsky" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F566275%2F8b26dec6-c249-4de2-9e0e-f8cf09e9e4ef.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Paul Bratslavsky</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":566275,"className":"User","name":"Paul Bratslavsky"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="566275"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/strapi" class="crayons-story__secondary fw-medium">Strapi</a> </span> </div> <a href="/strapi/epic-nextjs-15-tutorial-part-9-backend-deployment-to-strapi-cloud-5fl5" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-13T08:25:18Z">Nov 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731486318"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/strapi/epic-nextjs-15-tutorial-part-9-backend-deployment-to-strapi-cloud-5fl5" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0nun026ca0kjthn5ave2.png" id="article-link-2102125"> Epic Next.js 15 Tutorial Part 9: Backend Deployment To Strapi Cloud </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/strapi"><span class="crayons-tag__prefix">#</span>strapi</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/strapi/epic-nextjs-15-tutorial-part-9-backend-deployment-to-strapi-cloud-5fl5" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2102125" aria-label="Add a comment to post - Epic Next.js 15 Tutorial Part 9: Backend Deployment To Strapi Cloud"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/strapi/epic-nextjs-15-tutorial-part-9-backend-deployment-to-strapi-cloud-5fl5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Epic Next.js 15 Tutorial Part 9: Backend Deployment To Strapi Cloud"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="att6ts9n7fpz79jp02oqpp1fukwps6vh" class="crayons-icon"><title id="att6ts9n7fpz79jp02oqpp1fukwps6vh">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 8 min read </small> <button type="button" id="article-save-button-2102125" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2102125" data-article-author-id="566275" aria-label="Save post Epic Next.js 15 Tutorial Part 9: Backend Deployment To Strapi Cloud to reading list" title="Save post Epic Next.js 15 Tutorial Part 9: Backend Deployment To Strapi Cloud to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2102149" data-content-user-id="566275"> <a href="/strapi/epic-nextjs-15-tutorial-part-2-building-out-the-home-page-4nl5" aria-labelledby="article-link-2102149" class="crayons-story__hidden-navigation-link">Epic Next.js 15 Tutorial Part 2: Building Out The Home Page</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/strapi"> <img alt="Strapi logo" src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F763%2F988af53b-5d7e-435a-98eb-dd4aff5299d2.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/paulbratslavsky" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F566275%2F8b26dec6-c249-4de2-9e0e-f8cf09e9e4ef.jpeg" alt="paulbratslavsky profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/paulbratslavsky" class="crayons-story__secondary fw-medium m:hidden"> Paul Bratslavsky </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2102149" aria-controls="story-author-preview-content-2102149" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Paul Bratslavsky profile details"> Paul Bratslavsky </button> <div id="story-author-preview-content-2102149" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/paulbratslavsky" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F566275%2F8b26dec6-c249-4de2-9e0e-f8cf09e9e4ef.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Paul Bratslavsky</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":566275,"className":"User","name":"Paul Bratslavsky"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="566275"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/strapi" class="crayons-story__secondary fw-medium">Strapi</a> </span> </div> <a href="/strapi/epic-nextjs-15-tutorial-part-2-building-out-the-home-page-4nl5" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-13T08:46:17Z">Nov 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731487577"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/strapi/epic-nextjs-15-tutorial-part-2-building-out-the-home-page-4nl5" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fydl8z23o893c2davuymy.png" id="article-link-2102149"> Epic Next.js 15 Tutorial Part 2: Building Out The Home Page </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/strapi"><span class="crayons-tag__prefix">#</span>strapi</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/strapi/epic-nextjs-15-tutorial-part-2-building-out-the-home-page-4nl5" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2102149" aria-label="Add a comment to post - Epic Next.js 15 Tutorial Part 2: Building Out The Home Page"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/strapi/epic-nextjs-15-tutorial-part-2-building-out-the-home-page-4nl5#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Epic Next.js 15 Tutorial Part 2: Building Out The Home Page"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a163by8iofo6j8m7bx9y96yd62q2bgs6" class="crayons-icon"><title id="a163by8iofo6j8m7bx9y96yd62q2bgs6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 12 min read </small> <button type="button" id="article-save-button-2102149" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2102149" data-article-author-id="566275" aria-label="Save post Epic Next.js 15 Tutorial Part 2: Building Out The Home Page to reading list" title="Save post Epic Next.js 15 Tutorial Part 2: Building Out The Home Page to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2066568" data-content-user-id="1041894"> <a href="/arno_le_mans/how-i-got-over-my-fear-of-launching-by-building-a-simple-tool-in-a-few-hours-296a" aria-labelledby="article-link-2066568" class="crayons-story__hidden-navigation-link">How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/arno_le_mans" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1041894%2F6446b3cd-4c55-4209-8bec-52b95023e64e.png" alt="arno_le_mans profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/arno_le_mans" class="crayons-story__secondary fw-medium m:hidden"> Arno Le Mans </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2066568" aria-controls="story-author-preview-content-2066568" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Arno Le Mans profile details"> Arno Le Mans </button> <div id="story-author-preview-content-2066568" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/arno_le_mans" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1041894%2F6446b3cd-4c55-4209-8bec-52b95023e64e.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Arno Le Mans</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1041894,"className":"User","name":"Arno Le Mans"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1041894"></div> </div> </div> </div> </div> <a href="/arno_le_mans/how-i-got-over-my-fear-of-launching-by-building-a-simple-tool-in-a-few-hours-296a" class="crayons-story__tertiary fs-xs"><time datetime="2024-10-30T10:39:48Z">Oct 30</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730284788"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/arno_le_mans/how-i-got-over-my-fear-of-launching-by-building-a-simple-tool-in-a-few-hours-296a" data-preload-image="" id="article-link-2066568"> How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(9, 27, 71, 0.10); --tag-prefix: #091b47; --tag-bg-hover: rgba(9, 27, 71, 0.10); --tag-prefix-hover: #091b47; " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 102, 237, 0.10); --tag-prefix: #ff66ed; --tag-bg-hover: rgba(255, 102, 237, 0.10); --tag-prefix-hover: #ff66ed; " href="/t/learning"><span class="crayons-tag__prefix">#</span>learning</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/vercel"><span class="crayons-tag__prefix">#</span>vercel</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/arno_le_mans/how-i-got-over-my-fear-of-launching-by-building-a-simple-tool-in-a-few-hours-296a" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2066568" aria-label="Add a comment to post - How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/arno_le_mans/how-i-got-over-my-fear-of-launching-by-building-a-simple-tool-in-a-few-hours-296a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amn5hyxz7mnh2wejmpwq7cbtlq4bftco" class="crayons-icon"><title id="amn5hyxz7mnh2wejmpwq7cbtlq4bftco">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2066568" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2066568" data-article-author-id="1041894" aria-label="Save post How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours to reading list" title="Save post How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2098227" data-content-user-id="334096"> <a href="/torver213/build-deploy-a-real-time-sports-voting-app-with-expressjs-nextjs-nodejs-sse-on-vercel-google-cloud-app-engine-23c7" aria-labelledby="article-link-2098227" class="crayons-story__hidden-navigation-link">Build & Deploy a Real-Time Sports Voting App with Express.js, Next.js, Node.js, & SSE on Vercel & Google Cloud App Engine</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/torver213" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F334096%2F3676320c-b426-4c46-afbb-0cb47e18ae01.jpg" alt="torver213 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/torver213" class="crayons-story__secondary fw-medium m:hidden"> Peter Kelvin Torver </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2098227" aria-controls="story-author-preview-content-2098227" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Peter Kelvin Torver profile details"> Peter Kelvin Torver </button> <div id="story-author-preview-content-2098227" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/torver213" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F334096%2F3676320c-b426-4c46-afbb-0cb47e18ae01.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Peter Kelvin Torver</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":334096,"className":"User","name":"Peter Kelvin Torver"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="334096"></div> </div> </div> </div> </div> <a href="/torver213/build-deploy-a-real-time-sports-voting-app-with-expressjs-nextjs-nodejs-sse-on-vercel-google-cloud-app-engine-23c7" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-12T07:51:30Z">Nov 12</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731397890"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/torver213/build-deploy-a-real-time-sports-voting-app-with-expressjs-nextjs-nodejs-sse-on-vercel-google-cloud-app-engine-23c7" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fud0dobdn8253djo4ug4m.png" id="article-link-2098227"> Build & Deploy a Real-Time Sports Voting App with Express.js, Next.js, Node.js, & SSE on Vercel & Google Cloud App Engine </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(61, 136, 54, 0.10); --tag-prefix: #3d8836; --tag-bg-hover: rgba(61, 136, 54, 0.10); --tag-prefix-hover: #3d8836; " href="/t/node"><span class="crayons-tag__prefix">#</span>node</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/torver213/build-deploy-a-real-time-sports-voting-app-with-expressjs-nextjs-nodejs-sse-on-vercel-google-cloud-app-engine-23c7" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2098227" aria-label="Add a comment to post - Build & Deploy a Real-Time Sports Voting App with Express.js, Next.js, Node.js, & SSE on Vercel & Google Cloud App Engine"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="/torver213/build-deploy-a-real-time-sports-voting-app-with-expressjs-nextjs-nodejs-sse-on-vercel-google-cloud-app-engine-23c7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Build & Deploy a Real-Time Sports Voting App with Express.js, Next.js, Node.js, & SSE on Vercel & Google Cloud App Engine"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahhi69c3c1spgec732mr1eo3xzy7pd1w" class="crayons-icon"><title id="ahhi69c3c1spgec732mr1eo3xzy7pd1w">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2098227" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2098227" data-article-author-id="334096" aria-label="Save post Build & Deploy a Real-Time Sports Voting App with Express.js, Next.js, Node.js, & SSE on Vercel & Google Cloud App Engine to reading list" title="Save post Build & Deploy a Real-Time Sports Voting App with Express.js, Next.js, Node.js, & SSE on Vercel & Google Cloud App Engine to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2066565" data-content-user-id="2274122"> <a href="/aqsagull99/integrating-ai-powered-features-in-nextjs-15-applications-2h0h" aria-labelledby="article-link-2066565" class="crayons-story__hidden-navigation-link">Integrating AI-Powered Features in Next.js 15 Applications</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/aqsagull99" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2274122%2F766136f2-4400-4877-867c-148f432c69f2.jpeg" alt="aqsagull99 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/aqsagull99" class="crayons-story__secondary fw-medium m:hidden"> Aqsa Gull </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2066565" aria-controls="story-author-preview-content-2066565" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Aqsa Gull profile details"> Aqsa Gull </button> <div id="story-author-preview-content-2066565" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/aqsagull99" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2274122%2F766136f2-4400-4877-867c-148f432c69f2.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Aqsa Gull</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2274122,"className":"User","name":"Aqsa Gull"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2274122"></div> </div> </div> </div> </div> <a href="/aqsagull99/integrating-ai-powered-features-in-nextjs-15-applications-2h0h" class="crayons-story__tertiary fs-xs"><time datetime="2024-10-30T10:36:00Z">Oct 30</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730284560"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="/aqsagull99/integrating-ai-powered-features-in-nextjs-15-applications-2h0h" data-preload-image="" id="article-link-2066565"> Integrating AI-Powered Features in Next.js 15 Applications </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(23, 253, 26, 0.10); --tag-prefix: #17fd1a; --tag-bg-hover: rgba(23, 253, 26, 0.10); --tag-prefix-hover: #17fd1a; " href="/t/ai"><span class="crayons-tag__prefix">#</span>ai</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/react19"><span class="crayons-tag__prefix">#</span>react19</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/development"><span class="crayons-tag__prefix">#</span>development</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="/aqsagull99/integrating-ai-powered-features-in-nextjs-15-applications-2h0h" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2066565" aria-label="Add a comment to post - Integrating AI-Powered Features in Next.js 15 Applications"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="/aqsagull99/integrating-ai-powered-features-in-nextjs-15-applications-2h0h#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Integrating AI-Powered Features in Next.js 15 Applications"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6ha8yz4mag3wkyeovf6s5y4u60ki9ug" class="crayons-icon"><title id="a6ha8yz4mag3wkyeovf6s5y4u60ki9ug">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2066565" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2066565" data-article-author-id="2274122" aria-label="Save post Integrating AI-Powered Features in Next.js 15 Applications to reading list" title="Save post Integrating AI-Powered Features in Next.js 15 Applications to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="placeholder-div"></div> <div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div> </div> <div class="loading-articles" id="loading-articles"> loading... </div> </main> <div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right"> <div class="sidebar-bg" id="sidebar-bg-right"></div> <aside class="side-bar sidebar-additional showing" id="sidebar-additional"> <div class="widget"> <header> <h4>#discuss</h4> </header> <div class="widget-body"> <div class="widget-link-list"> <a class="crayons-link crayons-link--contentful" href="/vulcanwm/nextjs-hangout-thread-4l1h"> Next.js Hangout Thread <div class="crayons-link__secondary"> 7 comments </div> </a> <a class="crayons-link crayons-link--contentful" href="/jaibh/please-review-my-project-3lhm"> Please review my project <div class="crayons-link__secondary"> 11 comments </div> </a> <a class="crayons-link crayons-link--contentful" href="/litlyx/im-falling-in-love-with-build-in-public-23fa"> I'm Falling in love with Build in Public <div class="crayons-link__secondary"> 5 comments </div> </a> <a class="crayons-link crayons-link--contentful" href="/devwithsuraj/give-me-ideas-for-ai-tools-to-build-2a17"> Give me ideas for AI Tools to build <div class="crayons-link__secondary"> <span class="c-indicator c-indicator--warning">New</span> </div> </a> <a class="crayons-link crayons-link--contentful" href="/koladev/why-is-nextjs-so-popular-in-startups-3d3g"> Why is Nextjs so popular in startups? <div class="crayons-link__secondary"> <span class="c-indicator c-indicator--warning">New</span> </div> </a> <a class="crayons-link crayons-link--contentful" href="/arjuncodess/nextjs-the-future-of-react-2cmc"> Next.js: The Future Of React? <div class="crayons-link__secondary"> 8 comments </div> </a> <a class="crayons-link crayons-link--contentful" href="/madza/personal-portfolio-gatsby-vs-next-4ead"> Personal portfolio: Gatsby vs Next? <div class="crayons-link__secondary"> 26 comments </div> </a> <a class="crayons-link crayons-link--contentful" href="/razvanstatescu/how-i-made-an-app-and-pushed-it-live-in-4-days-1kp7"> How I made an app and pushed it live in 4 days <div class="crayons-link__secondary"> 3 comments </div> </a> <a class="crayons-link crayons-link--contentful" href="/mozammelh/is-it-a-good-idea-to-build-backend-with-nextjs-2oeg"> Is it a good idea to build backend with nextJS? <div class="crayons-link__secondary"> 23 comments </div> </a> <a class="crayons-link crayons-link--contentful" href="/bhagat-surya/should-i-use-server-side-rendering-with-nextjs-or-should-i-opt-for-using-express-or-nextjs-for-my-saas-432b"> Should I use server-side rendering with Next.js, or would Express or Bun.js be better for scalabi... <div class="crayons-link__secondary"> <span class="c-indicator c-indicator--warning">New</span> </div> </a> </div> </div> </div> <div class="widget"> <header> <h4>trending guides/resources</h4> </header> <div class="widget-body"> <div class="widget-link-list"> <a class="crayons-link crayons-link--contentful" href="/asmyshlyaev177/dark-side-of-nextjs-app-router-15l"> Dark side of Next.js - App Router </a> <a class="crayons-link crayons-link--contentful" href="/dimeloper/whats-new-in-nextjs-15-new-hooks-turbopack-and-more-2lo8"> What's New in Next.js 15: New Hooks, Turbopack and more </a> <a class="crayons-link crayons-link--contentful" href="/sentry/sentry-cant-fix-react-hydration-errors-but-it-can-really-help-you-debug-them-40aa"> Sentry can’t fix React hydration errors, but it can really help you debug them </a> <a class="crayons-link crayons-link--contentful" href="/shieldstring/nextjs-15-authentication-1al7"> Next.js 15 Authentication </a> <a class="crayons-link crayons-link--contentful" href="/robertobutti/building-a-website-using-markdown-content-with-nextjs-app-router-and-fusionable-4kj7"> Building a website using Markdown content with Next.js App Router and Fusionable </a> <a class="crayons-link crayons-link--contentful" href="/daviidy/6-steps-to-deploy-your-react-nextjs-app-with-github-pages-33ck"> 6 steps to deploy your React Next.js app with Github pages </a> <a class="crayons-link crayons-link--contentful" href="/ethanleetech/4-best-authentication-methods-for-nextjs-2705"> 4 Best Next.js Authentication Methods </a> <a class="crayons-link crayons-link--contentful" href="/ethanleetech/top-7-notification-solutions-for-nextjs-application-160k"> Top 7 Notification Solutions for Next.js Application </a> <a class="crayons-link crayons-link--contentful" href="/ethanleetech/task-scheduling-in-nextjs-top-tools-and-best-practices-2024-3l77"> 5 Top Tools for Task Scheduling in Next.js (2024) </a> <a class="crayons-link crayons-link--contentful" href="/ansonch/top-5-react-spreadsheet-libraries-for-2024-4ceb"> 📝 Top 5 React Spreadsheet Libraries for 2024 🚀 </a> <a class="crayons-link crayons-link--contentful" href="/ethanleetech/4-best-rate-limiting-solutions-for-nextjs-apps-2024-3ljj"> 4 Best Rate Limiting Solutions for Next.js Apps (2024) </a> <a class="crayons-link crayons-link--contentful" href="/04anilr/how-to-setup-os-nextjs-with-tailwind-css-24on"> How to setup os Next.js with Tailwind CSS </a> <a class="crayons-link crayons-link--contentful" href="/ethanleetech/top-6-queue-management-solutions-for-your-nextjs-app-2024-mal"> Top 6 Queue Management Solutions for Your Next.js App (2024) </a> <a class="crayons-link crayons-link--contentful" href="/codebucks/cursor-ai-crash-course-boost-your-productivity-with-ai-powered-coding-57c9"> Cursor AI Crash Course⚡: boost Your Productivity with AI-Powered Coding </a> <a class="crayons-link crayons-link--contentful" href="/hamzakhan/building-a-real-time-chat-app-with-sockets-in-nextjs-1po9"> 🔥 Building a Real-Time Chat App with Sockets in Next.js 💬 </a> <a class="crayons-link crayons-link--contentful" href="/rajeshkumaryadavdotcom/how-to-install-and-use-next-sitemap-in-a-nextjs-app-a-step-by-step-guide-114l"> How to Install and Use `next-sitemap` in a Next.js App: A Step-by-Step Guide </a> <a class="crayons-link crayons-link--contentful" href="/ethanleetech/5-best-email-services-for-nextjs-1fa2"> 5 Best Email Services for Next.js </a> <a class="crayons-link crayons-link--contentful" href="/ethanleetech/top-10-payment-processors-for-nextjs-applications-2024-1gmo"> Top 10 Payment Processors for Next.js Applications [2024] </a> <a class="crayons-link crayons-link--contentful" href="/hamzakhan/building-scalable-microservice-architecture-in-nextjs-1p21"> 🛠 Building Scalable Microservice Architecture in Next.js 🚀 </a> <a class="crayons-link crayons-link--contentful" href="/oyedeletemitope/understanding-the-react-cache-function-47jk"> Understanding the React Cache function </a> </div> </div> </div> </aside> </div> </div> <script src="https://assets.dev.to/assets/storiesList-b9c50cbd898a3a64258a3a49db1c531651b0a4a11937be35ed4651111802b5b5.js" defer="defer"></script> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/tagFollows-25496b4e3bf8bec41c7881be6b330ac8e9aa612d1ce876863a984d934d839384.js" defer="defer"></script> <script src="https://assets.dev.to/assets/feedPreviewCards-8d16b0b656456a28c0a290f756cf6e21e19833111c4796f48c631bfea8323d51.js" defer="defer"></script> <script src="https://assets.dev.to/assets/hideBookmarkButtons-0cc08aac1c422e6b6f75e5284b5350215abf211b59fb3eb8d8a4ef85e205b607.js" defer="defer"></script> <script src="https://assets.dev.to/assets/drawerSliders-823098a874684cfb50f32368b8dd1c7854954b83a588b8b6cfaef1e8fd30d858.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="1079620" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/guides"> Guides </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2024.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> </body> </html>

CINXE.COM

Next.js - DEV Community