Traces, Metrics and logs in NextJS apps with OpenTelemetry

Felipe Muner
 Location: Thailand
 Remote: Yes — Remote only
 Willing to Relocate: No
 Technologies: Next.js &#x2F; Vercel &#x2F; AWS, TypeScript, Tailwind CSS &#x2F; Shadcn&#x2F;UI &#x2F; Postgress&#x2F;Neon&#x2F;Supabase&#x2F;Firebase
 Résumé&#x2F;CV: https:&#x2F;&#x2F;www.felipemuner.work&#x2F;felipe-muner-resume.pdf
 Email: felipe.muner@gmail.comI’m Felipe — a disciplined, self-starting developer with a user-first mindset. I bring a sharp eye for detail, pixel-perfect UI execution, and a strong commitment to clean, accessible design. I focus on building thoughtful, high-performance web experiences using modern technologies and always keep the end user at the center of every decision.

Full Stack Web Developer (NextJS, TypeScript, Tailwind)

This app lets users search, add, edit, and delete movies. It was primarily a learning project to get comfortable with the new App Router features in Next.js. It also uses PostgreSQL for data storage.Feedback welcome.

Show HN: NextJS App Router Movie App with PostgreSQL

How I Built My Blog Using NextJS App Router

Many of the biggest recently built sites use NextJS.However, whenever I see dev comments about Next on HN, or r&#x2F;reactjs, it&#x27;s extremely negative sentiment.Can anyone help me understand the disconnect between my perceived developer sentiment, and how widely adopted Next has been by some of the biggest sites in the world?Is this a product decision forced upon devs, or are there lots of devs who love NextJS and they just stay quite on forums? If it is a product call, what are the main drivers here?

Ask HN: According to HN and r/reactjs, NextJS = bad. Yet many sites use it. Why?

NextJS 15,shadcn, next-auth, admin template

ShipFast Alternative – NextJS Boilerplate that's secure, and battle ready

Blog implemented using NextJS App router

Been working in a t3 monorepo and often times tiny ui changes result in having to touch 8-10 different files. Our trpc routes have grown exponentially and each dev is almost adding a new route for each specific feature. We have endpoints that return massive amounts of data fetched by hooks and modifying the prisma query often results in type errors in unrelated files.I have a strong feeling that something is wrong in our trpc &amp; react query hooks&#x27; structure or organization and its severely impacted the dev experience. Does anyone have experience scaling a trpc nextjs application? Are there any code structure or patterns that you use to do trpc the &quot;right&quot; way?I&#x27;m coming from a dotnet &#x2F; laravel stack and minor ui changes would never have spanned more than 2-3 files. It&#x27;s hard to find examples of companies using trpc in production and since its new there isn&#x27;t a lot of info about good practices around it.

Something is wrong w tRPC and NextJS dx

Declarative Streaming with NextJS and tRPC

Today marks ten years, 3653 consecutive days, of running at least one mile every day under the USRSA rules [1]. To celebrate, I built an interactive dashboard that turns a decade of GPX files into charts you can explore.Running has truly changed my life: I&#x27;ve made lifelong friends, explored beautiful places, and more importantly invested into my own health and fitness, which I&#x27;m starting to see the positive benefits as I get older.The stack is pretty simple: a NextJS app, with a Postgres database to keep all my running data, and all the stats are pre-computed and cached in Redis, so I effectively only hit the database once a day when a new run is ingested. On the fronted, I toyed with the idea of using D3 or pre-existing data viz libraries, but ended up rolling my own using SVGs directly, it gave me more control on the visualizations.I used the Strava bulk export to pre-populate the database, and I&#x27;m using their webhook API to do incremental updates. I have to tap into OpenWeatherMap and OpenCageDate to enrich the running data a little bit.Happy to answer anything about the stack, data pipeline, or how I stayed motivated for 10 years![1] <a href="https:&#x2F;&#x2F;www.runeveryday.com" rel="nofollow">https:&#x2F;&#x2F;www.runeveryday.com</a> Run Streak Association rules: ≥ 1 mile per day

Show HN: Ten years of running every day, visualized

After reading gwern’s post two days ago about LLM Daydreaming [0], I wanted to just see how it would behave. I grabbed the top vital article titles from wikipedia [1] and made a simple next js app to try the prompt in a loop.It was pretty interesting to see the connections made between concepts. Happy to host this if people find it useful![0] <a href="https:&#x2F;&#x2F;gwern.net&#x2F;ai-daydreaming" rel="nofollow">https:&#x2F;&#x2F;gwern.net&#x2F;ai-daydreaming</a>
[1] <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Wikipedia:Vital_articles" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Wikipedia:Vital_articles</a>

Show HN: Toy LLM Daydreaming

Hey HN!I&#x27;m a 17-year-old student building solo. I wanted to build a full app called WeekWise for habit building, but I don’t know mobile development yet. So I shipped one feature from it as a standalone web app: KarmaWall.What it does: 
Every day, you just post one productive thing you did. That’s it. 
It&#x27;s a small public wall to build daily consistency and feel accountable.Why I built it: 
I often start strong with habits and then fade. I needed a simple nudge to stay on track — not private, but also not overwhelming. KarmaWall is a tiny step toward fixing that.Built with: 
- Next JS + PostgreSQL
- OTP based authentication
- Desktop &amp; mobile-readyTry it: <a href="https:&#x2F;&#x2F;www.karmawall.space&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.karmawall.space&#x2F;</a>I’d love your thoughts. I&#x27;m planning to expand this into the full WeekWise app later, but I care most about helping people stick to small wins daily.Thanks for reading!

Show HN: KarmaWall – A daily public wall for small productivity wins

Hey HN,The latest MCP spec (<a href="https:&#x2F;&#x2F;modelcontextprotocol.io&#x2F;specification&#x2F;2025-06-18&#x2F;basic&#x2F;authorization" rel="nofollow">https:&#x2F;&#x2F;modelcontextprotocol.io&#x2F;specification&#x2F;2025-06-18&#x2F;bas...</a>) requires MCP Servers implement OAuth for authenticating users and authorizing access to tools and resources. I spent way too long wiring up OAuth to build a ChatGPT connector and decided to wrap the pain into a library: @mcpauth&#x2F;auth.What it is:- Self-hosted OAuth server, built for Model-Context-Protocol- Single authenticateUser() hook, so you plug in whatever session logic you already have (NextAuth, Auth.js, plain cookies, JWT, you name it)- Adapters: Next.js and Express; stores: Drizzle or Prisma- ISC licensed, no calls homeQuick start is ~5 min: npm i @mcpauth&#x2F;auth, add two route handlers, set three env vars.Live demo: <a href="https:&#x2F;&#x2F;mcpauth-nextjs.vercel.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;mcpauth-nextjs.vercel.app&#x2F;</a>If you’re building an MCP server or any internal AI tool that needs proper OAuth, I’d love feedback — especially on edge cases or new functionality.Repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;mcpauth&#x2F;mcpauth">https:&#x2F;&#x2F;github.com&#x2F;mcpauth&#x2F;mcpauth</a>

Show HN: Self-Hosted OAuth Authentication Library for MCP Servers

Hello, I am a current sophomore in uni. When I was a freshman, near the beginning of the school year, many clubs were having their introductory meetings.As I attended several meetings of the clubs; I noticed a prevalent issue, that clubs often had a poor, strung together system to keep track of attendance, coordinate scheduling, issue onboarding, and others. This gave me the idea to build a tool to meet the demand for some of these clubs.From talking to some current club leadership at my uni, I have garnered some positive validation for my idea as a business initiative, suggesting it could be viable.I believe a freemium SaaS would be the ideal business model, allowing an easy entrance for clubs, balancing wit premium features for clubs that have more users, larger files, more complex onboarding procedures, etc.Is anyone interesting in working with me on this project? I am a Computer Science major currently interning for the Summer, and I have experience with NextJS and Supabase as a frontend based developer. My ideal cofounder is one that is a bit older and more experienced, and sees a similar opportunity to develop this into a profitable business.My discord is happiers if you would like to get into contact with me there.:)

Looking for people interested in working on a project together

Hello hackers,I built Readmenote, an online web app for creating notes using GitHub style, great for previewing how content will appear in a README file.No login required. Free. Data is saved in your browser.Built using react-markdown, NextJS, etc.Take a look at <a href="https:&#x2F;&#x2F;www.readmenote.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.readmenote.com&#x2F;</a> . If you have some feedback, please let me know. Thank you so much.

Show HN: GitHub-style Markdown note app to test README content

I built this app initially for myself to learn to type properly because most typing apps didn&#x27;t offer exactly what I was looking for: interesting short-form text content, visual hand guides, detailed stats, etc.Typing random words on platforms like keybr and monkey type didn&#x27;t appeal to me - I would get bored fairly quickly and this limited my practice timeHence, TypeQuicker was born.My speed went from averaging 30-40WPM to 80-120WPM using this appHow it differs from other existing apps: it uses engaging content (trivia, quotes, jokes, book snippets) instead of random words. The AI analyzes your typing patterns and generates exercises targeting your specific weak character sequences. It offers very detailed stats after each text - measuring time between every keystrokeFeatures include:- visual hand and keyboard guides for beginners- detailed analytics- daily typing tests with a global leader-board- custom racing rooms- 40+ themes (some community favourites like Gruvbox, Tokyo Night and Dracula)- multiple text topics to choose from- custom text: input whatever you want to type- drills mode: practice typing common character sequences- (Paid) AI personalization: see <a href="https:&#x2F;&#x2F;www.typequicker.com&#x2F;pricing" rel="nofollow">https:&#x2F;&#x2F;www.typequicker.com&#x2F;pricing</a> for more info on these features.Built with Go&#x2F;Redis&#x2F;Postgres backend and NextJS frontend.Still adding many more features - this is still very much an MVP so I would love feedback from the community.I&#x27;m hoping to make this a one-stop shop for everything typing related.Try it at: <a href="https:&#x2F;&#x2F;www.typequicker.com" rel="nofollow">https:&#x2F;&#x2F;www.typequicker.com</a>

Show HN: TypeQuicker – The AI Typing Application

I’m 36 now and longing for the late nights playing poker with the boys.We’re so busy with families&#x2F;careers that getting a game is never going to happen.So I had the idea of Turn-Based Poker, like Words With Friends but for Hold’em.Get a push notification when it’s your turn to act, so we can play on the train, between meetings, on the toilet, etc.It&#x27;s built entirely on Expo + React Native + Firebase with a NextJS backend.I wrote a custom animation engine on top of React Native to render the card animations.Hope you like it!

Show HN: AsyncPoker – Turn-Based Poker with Friends

Built this to show off the recently released Flux Kontext model which is great at making edits based on your description, while keeping everything else the same. Eg. &quot;make him wear a suit&quot;, &quot;change the background to the beach&quot;, etc. No mask, etc needed.I&#x27;ve used Nextjs 15, and this page is static and fully client side. I&#x27;m still torn between the value of RSC, and the downside of it not being served from a CDN.I use Supabase for Db and Auth. Happy with these general, but their auth needs some work. The official supabase auth docs still recommend logic in nextjs middleware which hits your DB for protected routes.My app gives you 3 free edits per day with no sign up required. There&#x27;s rudimentary vibe-coded logic to enforce this, please don&#x27;t bankrupt me, i have a wife and kids.There&#x27;s potential to expand on what the app can do with flux kontext also supporting multiple images as a prompt, for things like combining people into one photo.Open to feedback and ideas on the tech, product or pricing.

Show HN: I built a web app to edit photos with a prompt using Flux Kontext

Hi HN,Many people underestimate the importance of context when using LLMs. I used to fire off vague prompts like:“Hey, build me the X tool” or “Generate a long-form article on Global Warming”.and got generic, sloppy responses.
Turns out, the problem wasn’t just the prompts, I needed a more systematic solution.So I started building AI capabilities into our agency’s management tool, Overbooked. After hours of iteration, I realized how powerful it is when you combine structured data with the right agent tools.
There are two sides to the coin:Using the MCP Server inside the IDEYou can connect Overbooked to modern IDEs like Cursor super easily:{
 &quot;mcpServers&quot;: {
 &quot;overbooked&quot;: {
 &quot;url&quot;: &quot;<a href="https:&#x2F;&#x2F;www.overbooked.app&#x2F;api&#x2F;mcp" rel="nofollow">https:&#x2F;&#x2F;www.overbooked.app&#x2F;api&#x2F;mcp</a>&quot;
 }
 }
}Your Cursor agent now has access to over 15 valuable tools. Here are some real-life examples of how users, including myself, are utilizing them:1. Cross-repo contextSay you’re maintaining a frontend and backend in separate repos. You can ask Cursor to:“Create a resource in project X including the required changes we need to apply on the server repository.” and on the server repo:“We need to do some changes on the X route, get the Required Changes resource and start refactoring.“Boom! Context preserved across both.2. Delegating tasks and preventing hallucinationsYou want to add a new feature to your app but Cursor can get ahead of itself quite often, generating unnecessary code or losing track of the task. Instead, try this:“We will implement X feature using existing modules whenever possible. Please create the necessary tasks and update their statuses as you go.”The plan is now clear and accessible for the LLM. It also reduces the amount of hallucinations significantly.3. Initializing and structuring new projectsOverbooked provides a variety of valuable tools for generating essential project documents, such as PRDs, tech stacks, and core features, as well as creating branded assets like color palettes, typography styles, and logos. You can always export them from the app, but they are also accessible via the MCP server for convenience. Try these: 
“Initialize a Nextjs app based on the documents of project X.“
“Pull the styles of project X and update the global.css to include the colors and typography styles.”Using the Chat Window inside the appAll MCP tools are accessible within the app, and some of them are more effective when used in the chat window. Some examples:1. Brainstorming in a group chatEach project in Overbooked includes a dedicated group chat tab. This is useful for brainstorming purposes because anyone on the team can tag Overbooked to ask questions, gather information from the internet. Check out the screenshots below:![Overbooked generating and creating tasks](<a href="https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;e06aa67d-c2b9-4a3d-a98f-2eb7a7e65100" rel="nofollow">https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;e06aa6...</a>)
![Created tasks in the board view](<a href="https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;944e580c-a127-4dcd-8c61-333764ed7628" rel="nofollow">https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;944e58...</a>)2. Generate long-form articles or social media postsBelow is a screenshot demonstrating Overbooked conducting research before generating the article:![Overbooked generating the article](<a href="https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;8325a4e1-8899-40ee-bc25-3ed3bc538a67" rel="nofollow">https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;8325a4...</a>)
![Screenshot of the generated article](<a href="https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;bf18dfba-d838-46c2-ac02-97e4ccea3596" rel="nofollow">https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;bf18df...</a>)3. Talk to your calendarYou can even talk to your calendar and let Overbooked create reminders for you. Check out the screenshot below: 
![Overbooked reporting the upcoming meetings](<a href="https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;4ed5c37a-5440-43fa-b615-c7b1a37b9ce8" rel="nofollow">https:&#x2F;&#x2F;calculating-goat-833.convex.cloud&#x2F;api&#x2F;storage&#x2F;4ed5c3...</a>)Using this daily has boosted our productivity, lowered stress levels, and provided us with more free time. I invite you to explore it and share your thoughts; any feedback is welcome!

Show HN: I built a context machine both users and LLM's love

# This is a NextJS
NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Getting Started

Create Next App:

```bash
npx create-next-app
# or
yarn create next-app
```

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

# File-based Routing In Action

![Create routes via your file + folder structure](nextjs-file-based-routing-in-action.png)

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

... More content comming soon ...

NextJs News

News From: hn.algolia.com