# Grayhat Blog Tag: Next.js > Expanded public blog context for posts tagged Next.js. ## Page - [Next.js Tag](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/next-js) - [Next.js Tag LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/next-js/llms.txt) - [Root LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms.txt) - [Root Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms-full.txt) - [Tag API](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/api/public/v1/tags/next-js) ## Tag Details - Slug: `next-js` - Description: Not provided - Post count in current snapshot: 2 ## Current Posts - [Fixing a Next.js Documentation Issue](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/fixing-a-next-js-documentation-issue) - How a small bug in the MSW example led me to contribute my first merged PR to Next.js, and what it taught me about open source. - [Sign in with Adobe in a Next.js App](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sign-in-with-adobe-in-a-next-js-app) - Use the power of Adobe to authenticate your Next app. ## Child Route Content ### [Fixing a Next.js Documentation Issue](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/fixing-a-next-js-documentation-issue) - Slug: `fixing-a-next-js-documentation-issue` - Published: 2025-10-24T18:22:25.000+05:00 - Updated: 2025-10-24T18:31:40.000+05:00 - Reading time: 4 min - Tags: Open Source, Vercel, Next.js, JavaScript, Open Source Community - Authors: Hamad Ullah - Visibility: public A few months ago, I was assigned a ticket to integrate **Mock Service Worker **in to Ruby for API mocking. While trying to make things work, I stumbled upon a confusing issue, not in my code, but in the **Next.js documentation itself**. What began as a simple debugging session turned into a pull request that’s now officially merged into the Next.js repository. This is a blog post on of how I found an issue, what I did to fix it, and why contributing to open source is essential. ### How I Found the Issue I setting up **API mocking** using **MSW** in our Next.js application. For local development, MSW is incredibly useful, it intercepts network requests and allows us to simulate API behaviour without touching the backend. I followed the Next.js documentation example for MSW setup carefully, but something just wasn’t working. The **worker setup** wasn’t behaving as described, in fact the imports were unrecognized. After digging into the issue for a bit, I realized the example itself had a **outdated setup,** something subtle that could easily trip up any developer trying to follow it step by step. I checked GitHub, and someone had already opened an issue describing the same problem. I realized the documentation is outdated and added a to-do for future reference to fix it in my free time. ### What I Did I cloned the Next.js repo, navigated to the documentation example, and made the necessary fix. The goal was simple, make the MSW example actually work as advertised. After verifying the fix locally and ensuring that it didn’t break anything else, I submitted a **pull request** with a short, clear explanation of what the problem was and how my change resolved it. The **Pull Request **I made is the following**:** Fix/msw-issue-68521 by HamadUllah16 · Pull Request #83482 · vercel/next.jsFix: 68521 Updating outdated with-msw example The with-msw is outdated and doesn't work with the latest msw version. What? The with-msw example is outdated and does not work with the latest msw…*GitHubvercel*Soon after, one of the maintainers reviewed it, validated the change, and merged it. That was a really satisfying moment, not just because my code was now part of Next.js, but because other developers wouldn’t need to waste their time figuring out why the setup isn't working as expected. ### Why I Think It Got Merged Open source maintainers get hundreds of PRs. What I did was review the ones that actually got merged. I think that’s what worked in my case: - I explained *why* the fix was needed, not just *what* it did. - I referenced the existing issue and made it easy to verify the bug and the fix. - The PR didn’t introduce extra complexity. It was a focused, single-purpose fix. - I followed the repo’s contribution guide and conventions closely. - I added a demo video which made it easier for reviewers to glance over my changes. Even though they'd still test locally, it establishes trust. I tried to make it as contextual and easy to review as possible, because open-source reviewers are often doing this work in their free time - it's best to utilize their time in the best possible way, in the rare hours they get it. ### Why is open source development important? Open source is the invisible backbone of modern web development. Majority of the frameworks, libraries, and tools we use, from **React** to **Next.js**, **MSW**, **Tailwind**, and beyond, are built on the collective effort of thousands of developers who share their work openly. Contributing back isn’t just a nice gesture, it’s how the web keeps evolving. When you fix a bug, improve documentation, or clarify an example, you’re helping thousands of other developers avoid the same confusion. What makes open source especially powerful in the **JavaScript ecosystem** is how interconnected everything is. A small fix in one project can ripple across others, improving developer experience far beyond a single codebase. In a world where frameworks constantly transform and build on each other, collaboration is what keeps innovation moving forward. Ruby – AI Powered Pitch Platform for Smarter SalesClose deals faster with Ruby. Instantly generate personalized, insight-driven sales pitches for any company using AI. Trusted by modern sales teams to win more.**Check out Ruby, the project I'm working on at Grayhat. I'm open to learn more in the future about Next.js and contributing to open-source. Stay tuned! ### [Sign in with Adobe in a Next.js App](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sign-in-with-adobe-in-a-next-js-app) - Slug: `sign-in-with-adobe-in-a-next-js-app` - Published: 2023-10-20T13:07:00.000+05:00 - Updated: 2024-08-31T13:42:30.000+05:00 - Reading time: 3 min - Tags: JavaScript, Development, Next.js, NextAuth - Authors: Saad Bazaz - Visibility: members **You can see the relevant Pull Request, and all the provider's code mentioned in this article, on GitHub: https://github.com/nextauthjs/next-auth/pull/8890Whether you're a seasoned Auth geek, or a newbie, NextAuth (soon, Authjs.dev) is the auth lib to use. That's why we chose it for Omni, since we needed a stable Auth solution so we could focus on experience. Adobe is a popular platform for creatives, and is widely used (obviously) internally at Adobe. From Behance, to Creative Cloud, and to Adobe Stock and many more, it's sort of the defacto for professional creatives. I believe it's a staple for products building in the art, media and design space, and sits right next to Google and ArtStation, and that made it a low-hanging fruit as an authentication feature for Omni's tools. This article has been made after painful hours understanding Adobe's OAuth 2.0 documentation. But there's one thing I'm grateful for; **standards** in the boring stuff. OAuth 2.0 has really made life much easier than before. The wild days of crappy Auth setups are long gone, and almost all major providers follow the standard to quite an extent, making integrations a breeze. At least for the libraries and builders who understand the standard. ## How to implement Adobe OAuth 2.0 Authentication ### 1. Create an account on Adobe's Developer Console Pretty straightforward. Use your team's account to create a Developer account on Adobe. You should be able to see a console here: https://developer.adobe.com/console/home *An important question: *What information do you want from Adobe? This is something that differs for each app. In our case, we just needed the bare minimum, so we went with Adobe Stock. You can see all the available scopes in OAuth 2.0 here. ### 2. Create a project On the Adobe Developer Console, create a new project for the app you're working on. ### 3. Add an API In the project you just created, you need to add an API. We chose Adobe Stock here, as mentioned earlier, because it gave us what we needed at the bare minimum. Make sure to choose an API with the **OAuth Web App **option. That's the one which'll work with Next.js. Read more on all the types here. ### 4. Configure the Credential **Default redirect URI: **This is the domain where you're hosting your app. Use https. **Redirect URI pattern: **This is a regex. This is the one I use: https://({{YOUR-PROJECT-NAME-ON-VERCEL}}-.*-{{YOUR-TEAM-NAME-ON-VERCEL}}\.vercel\.app|localhost)(.*)/api/auth/callback/adobe### 5. Install NextAuth Read more on that here. Set it up as per your requirements. ### 6. Add the Adobe Provider If, by the time you're reading this article, our PR is not part of the main source code, you'll have to add a custom OAuth Provider. No worries, here's the code for that: