Provide a more detailed summary of this webpage

[Open in app](https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Fe44fd4c99d20&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderUser&source=---top_nav_layout_nav-----------------------------------------) Sign up [Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&source=post_page---top_nav_layout_nav-----------------------global_nav------------------) [](https://medium.com/?source=---top_nav_layout_nav-----------------------------------------) [ Write ](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------) [ ](https://medium.com/search?source=---top_nav_layout_nav-----------------------------------------) Sign up [Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)  Top highlight 1  Backend for BFF # The Problem With NextJS ## I’ve been working with NextJS for a few years now, and the more I’ve used it, and in more contexts, the clearer it has become that NextJS has a major issue. [  ](/?source=post_page---byline--e44fd4c99d20---------------------------------------) [Matt Burgess](/?source=post_page---byline--e44fd4c99d20---------------------------------------) · [Follow](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Fc872406f4e32&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&user=Matt+Burgess&userId=c872406f4e32&source=post_page-c872406f4e32--byline--e44fd4c99d20---------------------post_header------------------) 10 min read · Feb 11, 2025 [ ](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fe44fd4c99d20&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&user=Matt+Burgess&userId=c872406f4e32&source=---header_actions--e44fd4c99d20---------------------clap_footer------------------) 128 7 [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fe44fd4c99d20&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&source=---header_actions--e44fd4c99d20---------------------bookmark_footer------------------) [ Listen ](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3De44fd4c99d20&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&source=---header_actions--e44fd4c99d20---------------------post_audio_button------------------) Share Well. Many. There are technical issues: the dev server is slow as hell, directory based routing sucks, and a bunch of other things. Those aren’t what I’m talking about though: I’m talking about an identity issue. Across my career I’ve seen a specific thing happen all the time: the dismissal of the backend. From micro-frameworks to backend-as-a-service, the idea that you can half-ass or remove the backend has been a pernicious and persistent one. The result of this has been that when Next started to gain traction the first thing people seemed to want to do is make the server replace an API entirely, make the NextJS application a full-stack application that does everything. This might seem initially effective, but this solution is loaded with potential issues, especially as the application begins to scale in requirements and complexity. **This is the exact definition of an “anti-pattern”.** # The point of this article I’ve gone back and forth on this article, rewriting and rethinking it, because I have two key points and I was always tending to lose focus on one, sacrificed for the other. So I want to explicitly call that out here, to explain what it is I’m getting at so that there’s some context to the following. The two points are these: 1. Good APIs are important and powerful parts of a web application and NextJS does not do a good job of creating a feature-rich API. Even in JavasScript you’re better off with NestJS (confusing, I know), or Adonis, or at the very worst Express. These are robust frameworks loaded with features that make a much better solution than Next ever will. Outside of JavaScript there is Rails, Phoenix, Golang, Rust, Django or an uncountable list of tools that will make a robust and powerful API. 2. One of the main reasons that NextJS isn’t a particuarly solid choice for an API is that I don’t think it was supposed to be. I think it was intended as — and excels as — a Backend-For-Frontend framework. The rest of this article goes into detail about these points and supporting them. # Build a better API Backend code did not stop having complex requirements just because it tends to output JSON instead of HTML. It wasn’t HTML generation that made these applications “big” and necessitated a “monolith” framwork. It’s testing, logging, messaging, onboarding, analytics, authentication, rate limiting, migration, email services, error handling, profiling, load testing, access control, websockets, deployment, reporting, serialisation, integration, auditing, security, and a bunch of other stuff. Sure, you can throw a Prisma connection in the server, but how are you doing to do websockets for real-time connections? Load balancing? API versioning? Splitting endpoints out into different microservices? Now it’s possible that you’ll be able to do all or some of this, given the time and effort. But these features are core to other frameworks, other languages, other solutions for backends. They’re already in the box or they’re a trivial first party library to install, pre-configured and well-integrated. If nothing else, the middleware alone in NextJS is extremely limited. No real “backend” has such limitations — a single function and a complex match pattern. No composition, no pattern of route association, no ability to group or assign routes. Just a single brute force function you can load with complex conditionals. It’s up to you what you choose, how you solve backend API. For me I’ve moved entirely into Golang for backends, but you do you. Even in JavaScript there are better options than NextJS for a true backend. Express is the bare minimum — personally I’m not a fan. NestJS (contrast with Next) and Adonis are both excellent JavaScript/TypeScript API solutions. # What NextJS is actually for — Best Friends Forever This isn’t to diminish NextJS, and it’s not to say it’s not suitable for a production system. It’s instead to point out that the reason it’s not great for these things is that it’s not really intended for them. NextJS is a minimal and not particularly potent backend. But it’s an exceptional Backend For Frontend. The Backend For Frontend pattern is a specific architectural pattern that is an acknowledgment of the increased complexity of both frontend and backend environments. The goal is to isolate the frontend — the client — from the outside world. With the BFF in place it becomes the only touchpoint for the client to talk to.  Direct connection with Essentially, a Backend For Frontend is a minimal backend that is intended to serve as a kind of butler for the special precious flower that is your client. Here is a short list of the benefits of making a Backend For Frontend. ## Microservices The primary origin of this pattern is in microservice architectures. Microservices have benefits in terms of splitting functionality and allowing different teams, approaches and languages. But there is an obvious issue dealing with that as a client. If the user service, the project service, and the activity service are all written differently there is every chance they are written with different fields, different serialisation, different standards and different expectations. BFF is intended to wrap that complexity, normalising the data to a single standard and letting the client deal with a single source. ## External Services Data doesn’t always come from the same source. Maybe your pricing data, mapping info, or user KYC comes from a third party? Using a Backend-For-Frontend lets you centralise these sources and make a request of a single place, letting the BFF deal with where the data actually comes from, potentially decorating the city response with weather details, or appending the current price to a transaction with an amount. ## Serialisation For myself I’ve used BFF with backend applications that serialise in a format that isn’t what I used, and had the BFF translate between standards like `company_id` and `companyId` for object keys, or to wrap or unwrap entities. ## Handling Errors There may well be errors coming from your backend that you want to isolate a bit from the frontend requirements. Maybe you want to pass in a translated error string, or maybe you want to suppress the error entirely. That sounds bad, but I remember dealing with one “REST” API that if a user didn’t have any of the requested entities, like if you requested their pending transactions, would not return an empty array but rather a 422 error. No discussion was entertained by the backend team, so we had to have a special handler for what we jokingly called a *422 Success Error*. This is the exact sort of nonsense your BFF can insulate you from. ## Intermediate Persistence There are all sorts of application states that you don’t necessarily want to store forever or with any particular level of robustness or atomicity. For example, the user sorted a table by the name field, ascending. Or they’ve set a filter. You want to persist that to the point that if they return or reload they won’t lose the interaction, but that doesn’t mean you need to store it in Postgres either. If nothing else a round-trip to the server to set such a trivial setting seems unnecessary. (It can and should be done optimistically, but that’s not the point.) Having an intermediate level of storage where you can dump data, such as a redis store at the BFF, is ideal for those things that don’t seem to belong in local storage, but also aren’t really worth cluttering up a “real” database. ## Security Because your BFF is a backend, you don’t need to put any secure links or keys in the client. The backend can make the request, and has access to the keys via best practices of vaults and environment variables. Then all the client has to do is dumbly request the already authorised data. ## CORS As a related point, CORS issues are trivialised by using something like NextJS as a Backend For Frontend. Because the CORS headers can be handled in the Next backend and that will satisfy the client. The backend itself makes the request and doesn’t care about CORS because that’s a client concern. ## Authentication and Authorization Though the extra hop in the process adds some complexity, the addition of options is surprisingly helpful for quality authentication. Specifically, everyone always tells you not to store the JWT in local storage on the client, but no one tells you were you **should** store the JWT. Using NextJS as a BFF gives you a good option — a read-only backend http cookie. This is secure, and also makes it possible to simply offload all authorization token logic to the backend. ## Multiple or different clients It’s possible that you have multiple different clients — a mobile app, web app, Samsung connected fridge, or whatever. The use for different BFFs for wildly different UIs can mean that it’s the BFFs organising the data for their own UI from a central source of data. Note this doesn’t specifically apply to NextJS, which is intimately tied to one client, it’s more about the pattern itself. ## Data Mocking This might be surprising, but when you deal with everything coming from a BFF it becomes extremely possible to simply isolate away the external API entirely. The BFF can retrieve data from the API, but it can also generate its own, create mock data, etc. This isolation can be hugely beneficial for rapid development, testing, etc. I’ve done this myself, making the backend return the mock data used for testing instead of connecting to the complex external API, allowing offline usage. # What is the downside? *There’s always something.* There’s always a corresponding cost to any benefit. In this case it’s pretty simple, and pretty obvious at the start. The cost is increased complexity, compared to a direct connection to a central API. There is a potential increase in infrastructure cost, especially if you want even a small database on the BFF. Another issue is that if you have multiple clients — such as a mobile app as well as your React app — you don’t see any benefit from the BFF pattern. In fact, you’d need a separate BFF for each different client. That’s what a BFF is for, it’s a backend proxy tailored for a specific client. # How to Backend-For-Frontend Like most formal patterns there is the officially correct way and then there’s a kind of near enough. Formally it’s required that all requests from the client must go through the Backend For Frontend. ## NextJS: Proxying through the API This is something I’ve done myself and provides a simple but effective solution. Simply create a catch-all route in the local NextJS API directory and proxy all API requests through that. This has the benefit of letting me convert all of my JavaScript `companyId` to `company_id` expected by Golang. Full disclosure: this caused a whole bunch of issues with request length headers and I ended up removing it, but the idea is nice, and maybe a smarter dev can get it working. ```plaintext import { type NextRequest } from "next/server"; export async function GET( req: NextRequest, { params }: { params: { proxy: string\[\] } }) { return handleRequest(req, { proxy: params.proxy }); } export async function POST( req: NextRequest, { params }: { params: { proxy: string\[\] } }) { return handleRequest(req, { proxy: params.proxy }); } export async function PATCH( req: NextRequest, { params }: { params: { proxy: string\[\] } }) { return handleRequest(req, { proxy: params.proxy }); } export async function PUT( req: NextRequest, { params }: { params: { proxy: string\[\] } }) { return handleRequest(req, { proxy: params.proxy }); } export async function handleRequest(req: NextRequest, query: any) { const { searchParams } = req.nextUrl; const method = req.method.toUpperCase(); const headers = Object.fromEntries(req.headers.entries()); const token = req.cookies.get("token"); if (token) { headers\["Authorization"\] = \`Bearer ${token}\`; } const params = searchParams.size > 0 ? "?" + searchParams.toString() : ""; const url = process.env.NEXT\_PUBLIC\_REMOTE\_API\_HOST + query.proxy.join("/") + params; const fetchOptions: RequestInit = { method, headers: { ...headers, "Content-Type": "application/json", }, ...(method !== "GET" && { body: JSON.stringify(await req.json()), }), }; try { const fetchResponse = await fetch(url, fetchOptions); const responseBody = await fetchResponse.json(); const body = JSON.stringify(responseBody); const responseHeaders = new Headers(fetchResponse.headers); return new Response(body, { status: fetchResponse.status, headers: responseHeaders, }); } catch (error) { console.log(error.message); console.log(error); return new Response( JSON.stringify({ message: "An unknown error occurred" }), { status: 500 } ); } } ``` # How to decide if you want a BFF There are two key guides — do you have multiple clients you want to give their own separate API? Or do you have a single client connecting to multiple disparate services? If either of those are true you’re probably going to benefit from the use of a BFF. Additionally, if you are connecting to an external API and there is “icky” to that API that you want to isolate away from the client. Finally, if there are security considerations that mean you’d be better off moving those requirements into a backend. The real benefit to NextJS here is that it provides an extremely low barrier to entry for a BFF architecture. Given that so many people are now choosing to use it regardless of having no interest in this design pattern why not leverage the full benefits the framework can offer? # To Conclude There are really three conclusions I wanted to make here because I wanted to kind of talk to three audiences. First of all, to those wanting to use NextJS as a “full stack framework”. There’s absolutely nothing wrong with throwing a Prisma or Drizzle connection on a NextJS application as a proof of concept, MVP, or tech demo. But if you’re building a business or long term application there’s every reason to believe you want more than that from your backend. Maybe you want the performance of Go or Rust or the rich feature set of Phoenix, Laravel or Rails. Or maybe you just want the lowest common denominator of Express. Either way, you can surely do better than NextJS as a backend. Use it for what it is excellent for — not what it’s almost adequate at. Second audience is those who are currently using NextJS with an external backend. This isn’t as well documented unfortunately (especially authorisation) but is a perfectly valid approach. If you are doing this, look into Backend-For-Frontend as a formal pattern and see if there are some optimisations you can make or some benefits you haven’t reaslised. Finally: if you’re making content for NextJS please don’t perpetuate the same limitations. Please stop writing or making videos about how to return a user from Prisma with a JWT and show people how they can connect to a REST API to do the same, how to manage that session. Stop overloading Next with the things it’s not good at and handwaving the emergent complexity. [ Nextjs ](https://medium.com/tag/nextjs?source=post_page-----e44fd4c99d20---------------------------------------) [ Development ](https://medium.com/tag/development?source=post_page-----e44fd4c99d20---------------------------------------) [ Web Development ](https://medium.com/tag/web-development?source=post_page-----e44fd4c99d20---------------------------------------) [ JavaScript ](https://medium.com/tag/javascript?source=post_page-----e44fd4c99d20---------------------------------------) [ ](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fe44fd4c99d20&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&user=Matt+Burgess&userId=c872406f4e32&source=---footer_actions--e44fd4c99d20---------------------clap_footer------------------) 128 [ ](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fe44fd4c99d20&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&user=Matt+Burgess&userId=c872406f4e32&source=---footer_actions--e44fd4c99d20---------------------clap_footer------------------) 128 7 [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fe44fd4c99d20&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&source=---footer_actions--e44fd4c99d20---------------------bookmark_footer------------------) [  ](/?source=post_page---post_author_info--e44fd4c99d20---------------------------------------) [  ](/?source=post_page---post_author_info--e44fd4c99d20---------------------------------------) Follow [ ## Written by Matt Burgess ](/?source=post_page---post_author_info--e44fd4c99d20---------------------------------------) [1.5K Followers](/followers?source=post_page---post_author_info--e44fd4c99d20---------------------------------------) ·[79 Following](/following?source=post_page---post_author_info--e44fd4c99d20---------------------------------------) Senior Web Developer based in Bangkok, Thailand. Javascript, Web and Blockchain Developer. Follow ## Responses (7) [](https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--e44fd4c99d20---------------------------------------)  Write a response [ What are your thoughts? ](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fthe-problem-with-nextjs-e44fd4c99d20&source=---post_responses--e44fd4c99d20---------------------respond_sidebar------------------) Cancel Respond Also publish to my profile [  ](https://medium.com/@gavgrayston?source=post_page---post_responses--e44fd4c99d20----0-----------------------------------) [ Gav Grayston ](https://medium.com/@gavgrayston?source=post_page---post_responses--e44fd4c99d20----0-----------------------------------) [ Feb 28 ](https://medium.com/@gavgrayston/yes-next-is-excellent-bff-c865bb3c1c6a?source=post_page---post_responses--e44fd4c99d20----0-----------------------------------) Simply create a catch-all route in the local NextJS API directory ```plaintext Yes, next is excellent BFF. You missed Server Actions and Server Components. With these the next “client” doesn’t need an http api route to communicate with the backend. The client just calls the code on the server (with security). It’s still a…more ``` [ ](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fc865bb3c1c6a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40gavgrayston%2Fyes-next-is-excellent-bff-c865bb3c1c6a&user=Gav+Grayston&userId=9d6e9d66f369&source=---post_responses--c865bb3c1c6a----0-----------------respond_sidebar------------------) 4 Reply [  ](https://medium.com/@maxime_26729?source=post_page---post_responses--e44fd4c99d20----1-----------------------------------) [ Maxime Nadeau ](https://medium.com/@maxime_26729?source=post_page---post_responses--e44fd4c99d20----1-----------------------------------) [ Mar 4 ](https://medium.com/@maxime_26729/great-article-i-agree-that-stuffing-backend-code-and-domain-logic-in-a-framework-is-a-terrible-a9fceb2f2ca0?source=post_page---post_responses--e44fd4c99d20----1-----------------------------------) ```plaintext Great article, I agree that stuffing backend code and domain logic in a framework is a terrible idea. If you do it for your own sake maybe it's fine, but if you have investors, partners or you are working for a vendor; it's terrible. Next doesn't…more ``` [ ](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fa9fceb2f2ca0&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40maxime_26729%2Fgreat-article-i-agree-that-stuffing-backend-code-and-domain-logic-in-a-framework-is-a-terrible-a9fceb2f2ca0&user=Maxime+Nadeau&userId=d7dcba7ce84b&source=---post_responses--a9fceb2f2ca0----1-----------------respond_sidebar------------------) 3 Reply [  ](https://medium.com/@iamharsharora1205?source=post_page---post_responses--e44fd4c99d20----2-----------------------------------) [ Harsh Arora he/him ](https://medium.com/@iamharsharora1205?source=post_page---post_responses--e44fd4c99d20----2-----------------------------------) [ 4 days ago ](https://medium.com/@iamharsharora1205/very-well-written-0b0e3d85ae5a?source=post_page---post_responses--e44fd4c99d20----2-----------------------------------) ```plaintext Very well written. ``` [ ](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2F0b0e3d85ae5a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40iamharsharora1205%2Fvery-well-written-0b0e3d85ae5a&user=Harsh+Arora&userId=2140a75eb528&source=---post_responses--0b0e3d85ae5a----2-----------------respond_sidebar------------------) Reply See all responses ## More from Matt Burgess  [  ](/?source=post_page---author_recirc--e44fd4c99d20----0---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ Matt Burgess ](/?source=post_page---author_recirc--e44fd4c99d20----0---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ ## React Hook Form vs React 19 ### Well this is awkward. Just as I was finishing and publishing a video on why to use React Hook Form instead of React, React 19 comes out… ](/react-hook-form-vs-react-19-1e28009e6557?source=post_page---author_recirc--e44fd4c99d20----0---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) Jan 1 [ 169 3 ](/react-hook-form-vs-react-19-1e28009e6557?source=post_page---author_recirc--e44fd4c99d20----0---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F1e28009e6557&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Freact-hook-form-vs-react-19-1e28009e6557&source=---author_recirc--e44fd4c99d20----0-----------------bookmark_preview----531d1773_09f1_40d0_ae49_4a69f06e0637--------------)  [  ](/?source=post_page---author_recirc--e44fd4c99d20----1---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ Matt Burgess ](/?source=post_page---author_recirc--e44fd4c99d20----1---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ ## Why would I use React Hook Form? ### Forms are some of the more complicated things we do in the web, and we don’t always do them well. React Hook Form can be a way to tame this… ](/why-would-i-use-react-hook-form-8ae7b905953e?source=post_page---author_recirc--e44fd4c99d20----1---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) Dec 19, 2024 [ 70 4 ](/why-would-i-use-react-hook-form-8ae7b905953e?source=post_page---author_recirc--e44fd4c99d20----1---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F8ae7b905953e&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fwhy-would-i-use-react-hook-form-8ae7b905953e&source=---author_recirc--e44fd4c99d20----1-----------------bookmark_preview----531d1773_09f1_40d0_ae49_4a69f06e0637--------------)  [  ](/?source=post_page---author_recirc--e44fd4c99d20----2---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ Matt Burgess ](/?source=post_page---author_recirc--e44fd4c99d20----2---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ ## Beyond console.log() ### There is more to debugging JavaScript than console.log to output values. It might seem obvious I’m going to pimp the debugger, but… ](/beyond-console-log-2400fdf4a9d8?source=post_page---author_recirc--e44fd4c99d20----2---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) Nov 7, 2018 [ 6K 13 ](/beyond-console-log-2400fdf4a9d8?source=post_page---author_recirc--e44fd4c99d20----2---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F2400fdf4a9d8&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fbeyond-console-log-2400fdf4a9d8&source=---author_recirc--e44fd4c99d20----2-----------------bookmark_preview----531d1773_09f1_40d0_ae49_4a69f06e0637--------------)  [  ](/?source=post_page---author_recirc--e44fd4c99d20----3---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ Matt Burgess ](/?source=post_page---author_recirc--e44fd4c99d20----3---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ ## Programming Paradigms — Procedural, Object Oriented, and Functional Programming ### These terms come up all the time but are rarely defined or discussed. So we’re going to have a look at these different ways of thinking… ](/programming-paradigms-procedural-object-oriented-and-functional-programming-23a587c6a537?source=post_page---author_recirc--e44fd4c99d20----3---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) Jul 4, 2020 [ 21 ](/programming-paradigms-procedural-object-oriented-and-functional-programming-23a587c6a537?source=post_page---author_recirc--e44fd4c99d20----3---------------------531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F23a587c6a537&operation=register&redirect=https%3A%2F%2Fmattburgess.medium.com%2Fprogramming-paradigms-procedural-object-oriented-and-functional-programming-23a587c6a537&source=---author_recirc--e44fd4c99d20----3-----------------bookmark_preview----531d1773_09f1_40d0_ae49_4a69f06e0637--------------) [ See all from Matt Burgess ](/?source=post_page---author_recirc--e44fd4c99d20---------------------------------------) ## Recommended from Medium  [  ](https://javascript.plainenglish.io/?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) In [ JavaScript in Plain English ](https://javascript.plainenglish.io/?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) by [ Blend Visions ](https://medium.com/@blendvisions?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ ## 14 Frontend System Design Concepts: Build Faster, Scalable Web Apps ### Building web applications with high speed performance for multiple users simultaneously becomes achievable through this article. The… ](https://medium.com/@blendvisions/14-frontend-system-design-concepts-build-faster-scalable-web-apps-72eff40a3d31?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) Mar 1 [ 84 ](https://medium.com/@blendvisions/14-frontend-system-design-concepts-build-faster-scalable-web-apps-72eff40a3d31?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F72eff40a3d31&operation=register&redirect=https%3A%2F%2Fjavascript.plainenglish.io%2F14-frontend-system-design-concepts-build-faster-scalable-web-apps-72eff40a3d31&source=---read_next_recirc--e44fd4c99d20----0-----------------bookmark_preview----219dd5ef_4219_4fd7_964f_c12564868dd9--------------)  [  ](https://medium.com/the-syntax-diaries?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) In [ The Syntax Diaries ](https://medium.com/the-syntax-diaries?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) by [ Amaresh Adak ](https://medium.com/@amareshadak?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ ## Stop Using useState for Everything — Here’s When useReducer Will Save Your Sanity ### The useReducer Guide You Didn’t Know You Needed ](https://medium.com/@amareshadak/stop-using-usestate-for-everything-heres-when-usereducer-will-save-your-sanity-bba92a45babd?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) 6d ago [ 173 4 ](https://medium.com/@amareshadak/stop-using-usestate-for-everything-heres-when-usereducer-will-save-your-sanity-bba92a45babd?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fbba92a45babd&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fthe-syntax-diaries%2Fstop-using-usestate-for-everything-heres-when-usereducer-will-save-your-sanity-bba92a45babd&source=---read_next_recirc--e44fd4c99d20----1-----------------bookmark_preview----219dd5ef_4219_4fd7_964f_c12564868dd9--------------) ## Lists [    ## General Coding Knowledge 20 stories·1945 saves ](https://eddiebarth.medium.com/list/general-coding-knowledge-f2d429d4f0cd?source=post_page---read_next_recirc--e44fd4c99d20---------------------------------------) [   ## Stories to Help You Grow as a Software Developer 19 stories·1624 saves ](https://medium.com/@MediumStaff/list/stories-to-help-you-grow-as-a-software-developer-b1d913188c20?source=post_page---read_next_recirc--e44fd4c99d20---------------------------------------) [    ## Coding & Development 11 stories·1033 saves ](https://medium.com/@jscribes/list/coding-development-e360d380bb82?source=post_page---read_next_recirc--e44fd4c99d20---------------------------------------) [    ## Growth Marketing 23 stories·336 saves ](https://medium.com/@biggynuttapon/list/growth-marketing-22a76d3bf3ac?source=post_page---read_next_recirc--e44fd4c99d20---------------------------------------)  [  ](https://medium.com/@sanjeevanibhandari3?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ Sanjeevani Bhandari ](https://medium.com/@sanjeevanibhandari3?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ ## How I Made My Next.js App Load 10x Faster (And You Can Too) ### The Performance Hacks No One Told You About (Until Now) ](https://medium.com/@sanjeevanibhandari3/how-i-made-my-next-js-app-load-10x-faster-and-you-can-too-30a8b6c86d9c?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) Feb 25 [ 253 6 ](https://medium.com/@sanjeevanibhandari3/how-i-made-my-next-js-app-load-10x-faster-and-you-can-too-30a8b6c86d9c?source=post_page---read_next_recirc--e44fd4c99d20----0---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F30a8b6c86d9c&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40sanjeevanibhandari3%2Fhow-i-made-my-next-js-app-load-10x-faster-and-you-can-too-30a8b6c86d9c&source=---read_next_recirc--e44fd4c99d20----0-----------------bookmark_preview----219dd5ef_4219_4fd7_964f_c12564868dd9--------------)  [  ](https://medium.com/@perisicnikola37?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ Nikola Perišić ](https://medium.com/@perisicnikola37?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ ## Don’t use TypeScript types like this. Use Map Pattern instead ### I’ll walk you through the problem I encountered, and how I improved the design by making a more dynamic approach using the Map pattern. ](https://medium.com/@perisicnikola37/dont-use-typescript-types-like-this-use-map-pattern-instead-bed75a0e986e?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) Feb 17 [ 374 7 ](https://medium.com/@perisicnikola37/dont-use-typescript-types-like-this-use-map-pattern-instead-bed75a0e986e?source=post_page---read_next_recirc--e44fd4c99d20----1---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fbed75a0e986e&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40perisicnikola37%2Fdont-use-typescript-types-like-this-use-map-pattern-instead-bed75a0e986e&source=---read_next_recirc--e44fd4c99d20----1-----------------bookmark_preview----219dd5ef_4219_4fd7_964f_c12564868dd9--------------)  [  ](https://medium.com/design-bootcamp?source=post_page---read_next_recirc--e44fd4c99d20----2---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) In [ Bootcamp ](https://medium.com/design-bootcamp?source=post_page---read_next_recirc--e44fd4c99d20----2---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) by [ Rita Kind-Envy ](https://kindenvy.medium.com/?source=post_page---read_next_recirc--e44fd4c99d20----2---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ ## I finally understand what FAANG wants in a candidate ### 6 rules on “how to tango” in the interviews which got me the job. ](https://kindenvy.medium.com/i-finally-understand-what-faang-wants-in-a-candidate-0b4638ca5618?source=post_page---read_next_recirc--e44fd4c99d20----2---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) Mar 4 [ 705 10 ](https://kindenvy.medium.com/i-finally-understand-what-faang-wants-in-a-candidate-0b4638ca5618?source=post_page---read_next_recirc--e44fd4c99d20----2---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F0b4638ca5618&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fdesign-bootcamp%2Fi-finally-understand-what-faang-wants-in-a-candidate-0b4638ca5618&source=---read_next_recirc--e44fd4c99d20----2-----------------bookmark_preview----219dd5ef_4219_4fd7_964f_c12564868dd9--------------)  [  ](https://itnext.io/?source=post_page---read_next_recirc--e44fd4c99d20----3---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) In [ ITNEXT ](https://itnext.io/?source=post_page---read_next_recirc--e44fd4c99d20----3---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) by [ Maxime ](https://medium.com/@all.technology.stories?source=post_page---read_next_recirc--e44fd4c99d20----3---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ ## Why Island Architecture Might Be the Future of Web Performance ### Build only what’s needed — no bloat, no wasted code, just speed ](https://medium.com/@all.technology.stories/island-architecture-a-smarter-way-to-build-resilient-systems-0d9b36f6a067?source=post_page---read_next_recirc--e44fd4c99d20----3---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) Feb 10 [ 115 2 ](https://medium.com/@all.technology.stories/island-architecture-a-smarter-way-to-build-resilient-systems-0d9b36f6a067?source=post_page---read_next_recirc--e44fd4c99d20----3---------------------219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F0d9b36f6a067&operation=register&redirect=https%3A%2F%2Fitnext.io%2Fisland-architecture-a-smarter-way-to-build-resilient-systems-0d9b36f6a067&source=---read_next_recirc--e44fd4c99d20----3-----------------bookmark_preview----219dd5ef_4219_4fd7_964f_c12564868dd9--------------) [ See more recommendations ](https://medium.com/?source=post_page---read_next_recirc--e44fd4c99d20---------------------------------------) [ Help ](https://help.medium.com/hc/en-us?source=post_page-----e44fd4c99d20---------------------------------------) [ Status ](https://medium.statuspage.io/?source=post_page-----e44fd4c99d20---------------------------------------) [ About ](https://medium.com/about?autoplay=1&source=post_page-----e44fd4c99d20---------------------------------------) [ Careers ](https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----e44fd4c99d20---------------------------------------) [ Press ](mailto:pressinquiries@medium.com) [ Blog ](https://blog.medium.com/?source=post_page-----e44fd4c99d20---------------------------------------) [ Privacy ](https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----e44fd4c99d20---------------------------------------) [ Terms ](https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----e44fd4c99d20---------------------------------------) [ Text to speech ](https://speechify.com/medium?source=post_page-----e44fd4c99d20---------------------------------------) [ Teams ](https://medium.com/business?source=post_page-----e44fd4c99d20---------------------------------------)