[{"data":1,"prerenderedAt":491},["ShallowReactive",2],{"\u002Fblogs\u002Fshould-you-use-nextjs":3},{"id":4,"title":5,"body":6,"coverImage":478,"description":481,"extension":482,"meta":483,"navigation":484,"path":485,"publishedOn":486,"seo":487,"sitemap":488,"stem":489,"__hash__":490},"content\u002Fblogs\u002Fshould-you-use-nextjs.md","Should You Use Next.js?",{"type":7,"value":8,"toc":461},"minimark",[9,33,36,41,54,57,142,167,170,174,177,180,185,199,206,224,228,240,268,275,279,289,292,295,299,306,309,313,316,323,327,368,377,380,384,387,390,401,414,418,425,428,441,444,453],[10,11,12,13,20,21,26,27,32],"p",{},"I was introduced to ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fnextjs.org",[18],"nofollow","Next.js"," about a year ago when I\nstarted my journey to learn \"",[14,22,25],{"href":23,"rel":24},"https:\u002F\u002Fweb.dev",[18],"Web Development","\". I didn't know\nmuch about the framework, I wasn't told it was based on\n",[14,28,31],{"href":29,"rel":30},"https:\u002F\u002Freactjs.org",[18],"React.js",". And neither did I know how would the framework\nhelp me build the products I wanted to build.",[10,34,35],{},"Hence over the couple of months I did learn quite a few intricacies of the\nframework. I realised even though the framework is advertised to be a packaged\nsolution for a full-stack development experience, the reality is far from the\ntruth. The framework isn't a one-stop solution to building web apps, it does\ncome with a couple of compromises. And I hope to educate you on when choosing\nNext.js is the right choice",[37,38,40],"h2",{"id":39},"whats-nextjs-whats-with-its-hype-all-about","What's Next.js & What's With It's Hype All About",[10,42,43,44,47,48,53],{},"As I mentioned already Next.js is a frontend framework based on\n",[14,45,31],{"href":29,"rel":46},[18],". And it was created at\n",[14,49,52],{"href":50,"rel":51},"https:\u002F\u002Fvercel.com",[18],"Vercel"," with the primary focus on building & shipping\nproducts real quick. Vercel advertises the framework by promising to deliver a\nsplendid Developer Experience (DX) besides other client-side goodies. And after\nusing the framework for a while I can say Vercel does live up to its promise.",[10,55,56],{},"That said, the framework's Unique Selling Points (USPs) are:",[58,59,60,94,121],"ol",{},[61,62,63,64,69,70,75,76,81,82,87,88,93],"li",{},"Its out-of-the-box ",[14,65,68],{"href":66,"rel":67},"https:\u002F\u002Fwebpack.js.org",[18],"Webpack"," configuration which\nallows the framework to perform some heavy-weight tasks like\n",[14,71,74],{"href":72,"rel":73},"https:\u002F\u002Fwebpack.js.org\u002Fconcepts\u002F",[18],"bundling","\u002F",[14,77,80],{"href":78,"rel":79},"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002F2\u002Fbasic-types.html#tsc-the-typescript-compiler",[18],"compiling",",\nenabling\n",[14,83,86],{"href":84,"rel":85},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Frouting\u002Fintroduction",[18],"file-system based routing"," &\n",[14,89,92],{"href":90,"rel":91},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fbasic-features\u002Fpages",[18],"much more","!",[61,95,96,97,105,106,87,113,120],{},"The well optimised React.js components like the\n",[14,98,101],{"href":99,"rel":100},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fbasic-features\u002Fimage-optimization",[18],[102,103,104],"code",{},"Image",",\n",[14,107,110],{"href":108,"rel":109},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fbasic-features\u002Fscript",[18],[102,111,112],{},"Script",[14,114,117],{"href":115,"rel":116},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapi-reference\u002Fnext\u002Flink",[18],[102,118,119],{},"Link"," components.",[61,122,123,124,129,130,135,136,141],{},"Improved factors affecting\n",[14,125,128],{"href":126,"rel":127},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs#what-is-seo",[18],"Search Engine Optimisation","\n(SEO) by making the most out of\n",[14,131,134],{"href":132,"rel":133},"https:\u002F\u002Fweb.dev\u002Frendering-on-the-web\u002F#static-rendering",[18],"Static Site Generation","\n(SSG) &\n",[14,137,140],{"href":138,"rel":139},"https:\u002F\u002Fweb.dev\u002Frendering-on-the-web\u002F#server-rendering",[18],"Server Side Rendering","\n(SSR) capabilities.",[10,143,144,145,150,151,156,157,93],{},"If you instead chose to work with React.js instead, you would've had to write a\nlot of boilerplate code as well as use some extra packages like\n",[14,146,149],{"href":147,"rel":148},"https:\u002F\u002Freactrouter.com",[18],"React Router"," & what not. On top of it, React.js is\nmeant to create\n",[14,152,155],{"href":153,"rel":154},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FSPA",[18],"Single Page Applications","\n(SPAs) which are notoriously known\n",[14,158,161,162,166],{"href":159,"rel":160},"https:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=30528473",[18],"for being SEO \"",[163,164,165],"strong",{},"unfriendly","\"",[10,168,169],{},"Next.js attempts to resolve quite a few of those concerns Web Developers\ngenerally have when building a React.js-based product. So, in the next section,\nlet's take a look at how the frameworks helps the developer fix some of the said\nissues.",[37,171,173],{"id":172},"how-does-nextjs-attempt-to-resolve-existing-issues","How Does Next.js Attempt to Resolve Existing Issues",[10,175,176],{},"The previous section of the write-up shared a brief touch on some of the core\nfeatures of the framework which were the driving reason behind its massive hype.\nBut under-the-hood how does the framework's features work which React.js by\nitself can't provide?",[10,178,179],{},"In this section of the article, let's attempt to understand the core Next.js\nfeatures a little better.",[181,182,184],"h3",{"id":183},"the-out-of-the-box-webpack-experience","The Out-of-the-Box Webpack Experience",[10,186,187,188,193,194,198],{},"Under the hood Next.js is powered by Webpack for almost all of the heavy-lifting\noperations like optimisation tasks, routing & static generation. It does provide\na means to\n",[14,189,192],{"href":190,"rel":191},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapi-reference\u002Fnext.config.js\u002Fcustom-webpack-config",[18],"customise that in-built Webpack configuration",".\nBut I can say from personal experience, you rarely ever need it (",[195,196,197],"em",{},"unless you\nknow what you're supposed to do",")!",[10,200,201,202,205],{},"Suffice to say, for someone who doesn't know how to configure Webpack very well,\nNext.js is next to a godsend (",[195,203,204],{},"no pun intended"," 😅)!",[10,207,208,211,212,217,218,223],{},[163,209,210],{},"NOTE",": Since ",[14,213,216],{"href":214,"rel":215},"https:\u002F\u002Fnextjs.org\u002Fblog\u002Fnext-12",[18],"Next.js v12.x",", the framework\ndepends on ",[14,219,222],{"href":220,"rel":221},"https:\u002F\u002Fwebpack.js.org\u002Fblog\u002F2020-10-10-webpack-5-release",[18],"Webpack 5","\nwhich brings about improved optimisation & other goodies like faster build times\n& much more!",[181,225,227],{"id":226},"pre-developed-reactjs-components","Pre-Developed React.js Components",[10,229,230,231,233,234,236,237,239],{},"Perhaps the second-most important factor behind the Next.js hype are the\npre-developed React.js components like ",[102,232,104],{},", ",[102,235,112],{}," & ",[102,238,119],{}," components.\nThese components were built with optimised standard practices in mind. And I bet\nyou, using them in your product will bring significant performance improvements\nwhich you might notice right away!",[10,241,242,243,245,246,248,249,256,257,259,260,267],{},"For more context, the ",[102,244,104],{}," & the ",[102,247,112],{}," components, uses recommended\ntechniques like\n\"",[14,250,253],{"href":251,"rel":252},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FPerformance\u002FLazy_loading",[18],[195,254,255],{},"lazy-loading","\"\nto only load static assets when absolutely necessary! The ",[102,258,119],{}," component on\nthe hand\n\"",[14,261,264],{"href":262,"rel":263},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FPrefetch",[18],[195,265,266],{},"prefetches","\" the\ncontents of a hyperlinked web page in the background. In doing so, clicking an\nURL feels like navigating around a native application rather than a website.",[10,269,270,271,274],{},"The Next.js developers (",[195,272,273],{},"and the community",") are also actively improving\u002Fadding\nmore such components, so I suggest checking out the official documentations for\nmore information.",[181,276,278],{"id":277},"static-generation-andor-server-rendering-capabilities","Static Generation and\u002For Server Rendering Capabilities",[10,280,281,282,236,285,288],{},"By far the most important feature & the only which made Next.js as popular as it\nis today is it's hybrid approach towards both static generation & server-side\nrendering capabilities! The framework provides two asynchronous functions -\n",[102,283,284],{},"getStaticProps",[102,286,287],{},"getServerSideProps",". Depending on the use case, these two\nfunctions are responsible for fetching & serving data either statically or from\nthe server respectively.",[10,290,291],{},"Now discussing how those functions work & how they should be used is beyond the\nscope of this article. But be sure to follow me to stay updated on an article\nI'm working to discuss those two functions more comprehensively.",[10,293,294],{},"Regardless the gist is, you get to choose which approach you would like to take.\nIts also possible to mix-and-match both capabilities in a single website! Pretty\nnifty if you ask & no wonder, the framework picked up pace so fast.",[37,296,298],{"id":297},"where-to-use-nextjs","Where to Use Next.js?",[10,300,301,302,305],{},"The previous section of the write-up discussed some of the core features of\nNext.js in details (",[195,303,304],{},"but not as much detail as I would've preferred!","). And\nreading about the features I bet it piqued your interest & you would prefer\njumping ship right away. But hold on to your horses & make a decision after\nreading this section. This section will give you an idea if Next.js is the right\nchoice for your requirements.",[10,307,308],{},"So, let's see what're some of the popular use cases where the project can\nbenefit from the core Next.js features.",[181,310,312],{"id":311},"ecommerce-websites","eCommerce Websites",[10,314,315],{},"Hands down by far the best frontend framework to build eCommerce websites is\nNext.js! It's hybrid static & server rendering capabilities means you can choose\nto statically deliver certain pages of the site like the product or the landing\npage. While other pages like the pricing information pages, the reviews & such\ncan be server rendered!",[10,317,318,319,322],{},"The gist is pre-render the pages & assets which doesn't change (",[195,320,321],{},"or need to\nchange",") often throughout the lifecycle of the eCommerce site. And render other\ninformation like product reviews, pricing information, discount offers & such on\nthe server before delivering it to the user.",[181,324,326],{"id":325},"blog-content-marketing-products","Blog & Content Marketing Products",[10,328,329,330,335,336,341,342,347,348,351,352,357,358,363,364,367],{},"Next.js is pretty capable of building blog sites & other related content\nmarketing products! For example, I'm working on\n",[14,331,334],{"href":332,"rel":333},"https:\u002F\u002Fgithub.com\u002FJarmos-san\u002Fpersonal-website",[18],"rebuilding my personal website","\nfrom scratch with Next.js. You can hook up the site to a\n",[14,337,340],{"href":338,"rel":339},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FContent_management_system",[18],"Content Management System","\n(CMS) like ",[14,343,346],{"href":344,"rel":345},"https:\u002F\u002Fhygraph.com",[18],"Hygraph"," (",[195,349,350],{},"formerly GraphCMS","). Or even use\n",[14,353,356],{"href":354,"rel":355},"https:\u002F\u002Fwww.markdownguide.org",[18],"Markdown"," to author version-controlled content\non ",[14,359,362],{"href":360,"rel":361},"https:\u002F\u002Fgithub.com",[18],"GitHub",". You can then use a hosting provider like\n",[14,365,52],{"href":50,"rel":366},[18]," to build\u002Fhost the frontend.",[10,369,370,371,376],{},"Since Next.js is nothing more than a ",[14,372,375],{"href":373,"rel":374},"https:\u002F\u002Fnodejs.org",[18],"Node.js \"application\"","\nfunctionality-wise, what you can possibly do with the framework is limited by\nthe capabilities of Node.js & your imagination!",[10,378,379],{},"Data fetching & pre-rendering with Next.js is a complex topic & as such deserves\na standalone article of its own. But rest assured I'll be back with yet another\ncomprehensive write-up on this same topic! So, don't forget to follow me for\nfuture updates.",[181,381,383],{"id":382},"internal-dashboards-or-related-microservice-based-products","Internal Dashboards or Related Microservice-based Products",[10,385,386],{},"So far we only discussed the frontend aspects of Next.js & rightfully so. I mean\nwho would expect a React.js-based framework to have backend capabilities, right?",[10,388,389],{},"Well surprise! Next.js allows you to also build API endpoints using a backend\nframework like Express.js as well!",[10,391,392,393,400],{},"As for how exactly does the frontend framework's backend capabilities work, that\nwill have to wait for another write-up since its a tad bit out-of-scope for this\narticle. But for now, my suggestions would be to head over to the official\ndocumentations. And you'll find a more comprehensive discussion there about the\n\"",[14,394,397],{"href":395,"rel":396},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapi-routes\u002Fintroduction",[18],[195,398,399],{},"API Routes","\" which Next.js\nsupports.",[10,402,403,404,407,408,413],{},"But if you want to take a look at some real-world examples of such \"",[195,405,406],{},"full-stack\napplications","\" built with Next.js, take a look at \"",[14,409,412],{"href":410,"rel":411},"https:\u002F\u002Fumami.is",[18],"Umami","\".\nIt's an open-source analytics alternative to Google Analytics. And I personally\nuse to track usage data for my personal website as well!",[37,415,417],{"id":416},"final-notes-on-nextjs-its-usage","Final Notes on Next.js & its Usage",[10,419,420,421,424],{},"While Next.js does come with a ",[163,422,423],{},"LOT"," of attractive features & especially\nfeatures which improves the developer experience manifold, like every other\nsoftware, Next.js comes with compromises as well! This write-up shed lightly\nmostly on pros of using Next.js. So, if you want to read a more comprehensive\nwrite-up on the cons of Next.js stay tuned for future updates.",[10,426,427],{},"In a future article I plan on discussing how Next.js suffers from issues with\ncaching & displaying old data to the users. All while the data has already been\nupdated in the backend server. And a couple of hacky solutions to deal with such\nsituations.",[10,429,430,431,434,435,437,438,440],{},"We also ",[163,432,433],{},"VERY"," briefly touched on the data fetching capabilities of Next.js\nlike when to use or not use the ",[102,436,284],{}," or ",[102,439,287],{},"\nfunctions. Using these functions properly & in ways they were intended to be\nused is what will ultimately ensure if your product is optimised or not!",[10,442,443],{},"Pre-rendering static assets is also known to be a painful experience especially\nif you're statically generating thousands if not hundreds of pages. So again\nknowing where to use server rendering or static generation is paramount.",[10,445,446,447,452],{},"All-in-all the\n",[14,448,451],{"href":449,"rel":450},"https:\u002F\u002Fgithub.com\u002Forgs\u002Fvercel\u002Fpeople",[18],"talented developers at Vercel"," are\npretty good at what they're doing with Next.js. And hence I envision a promising\nfuture ahead for the framework! The community around the framework is also quite\nmature & feature requests are reviewed & merged every other day.",[10,454,455,456,93],{},"Hence, at the end of the day, I can't recommend Next.js for building your next\nstartup business around with. And I hope, my article helped you make a decision\nabout choosing the right tech stack in one way or the other. If it did help you\nout, feel free to\n",[14,457,460],{"href":458,"rel":459},"https:\u002F\u002Fjarmos.vercel.app\u002Fabout#contact-details",[18],"reach out to me",{"title":462,"searchDepth":463,"depth":463,"links":464},"",2,[465,466,472,477],{"id":39,"depth":463,"text":40},{"id":172,"depth":463,"text":173,"children":467},[468,470,471],{"id":183,"depth":469,"text":184},3,{"id":226,"depth":469,"text":227},{"id":277,"depth":469,"text":278},{"id":297,"depth":463,"text":298,"children":473},[474,475,476],{"id":311,"depth":469,"text":312},{"id":325,"depth":469,"text":326},{"id":382,"depth":469,"text":383},{"id":416,"depth":463,"text":417},{"url":479,"alt":480},"https:\u002F\u002Fik.imagekit.io\u002Fjarmos\u002Fshould-you-use-nextjs.png?updatedAt=1702974989276","Should you use Next.js for building your projects?","Explore the realities of Next.js for web development. Learn its out-of-the-box features, optimized React.js components, and SEO improvements. Discover popular use cases from eCommerce to content marketing. Follow for updates on cons and optimization techniques.","md",{},true,"\u002Fblogs\u002Fshould-you-use-nextjs","2022-02-12",{"title":5,"description":481},{"loc":485},"blogs\u002Fshould-you-use-nextjs","7Z4aRvYDVq4HeyViOc1PKp1zQZLMSk3fAroR9oaiXno",1788689045378]