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?

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

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

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

We&#x27;ve been using V0 (https:&#x2F;&#x2F;v0.dev&#x2F;) for a while now, and relative to other LLMs it definitely seems to be a level up in terms of the quality and readability of the code.I&#x27;ve watched a few talks by the Vercel engineers and they mention that they&#x27;ve done a lot of work specifically for this by leaning into a strategy of:* Training the model for specific language + frameworks (typescript, nextjs, react and shadcdn)* Collecting and using high-quality code samples for trainingI&#x27;m wondering if anyone else knows of any other model providers that have similar offerings where they&#x27;re building LLMs to be better within the context of a specific language and&#x2F;or framework (eg: Python + FastAPI, etc.).

Ask HN: Are there other language/framework-specific LLMs?

I started this boilerplate in July 2020 and I’ve been maintaining it for 5 years. It began on Next.js 9 and kept upgrading to Next.js 15+ (App Router), while upgrading the stack over time (Tailwind 1 → 4, ESLint 8, swapping Cypress → Playwright, etc.). The goal is simple: I kept rebuilding the same setup, so I packaged it and kept it updated.What you get (preconfigured, keep only what you need):- Next.js 15 (App Router) + TypeScript + Tailwind 4- Auth with Clerk (magic links, MFA, social, passkeys)- I18n via next-intl- DB with Drizzle ORM (PGlite locally)- Forms with React Hook Form + Zod validation- Testing: Vitest (unit), Playwright (integration&#x2F;E2E)- CI with GitHub Actions; Storybook for UI work- SEO (Open Graph, JSON-LD, sitemap, robots)- Observability: Sentry, logging with LogTape, log management &amp; uptime&#x2F;monitoring- Security: Arcjet (bot detection, rate limiting, shield rules)- DX details: ESLint&#x2F;Prettier, Lefthook + lint-staged, Commitlint, absolute imports, bundle analyzer- AI code reviewIt’s free and open source (MIT). Today the project sits around 11.8k GitHub stars and 2.2k forks. I’m still actively maintaining it and adding features.Repo: <a href="https:&#x2F;&#x2F;github.com&#x2F;ixartz&#x2F;Next-js-Boilerplate" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ixartz&#x2F;Next-js-Boilerplate</a>Why I built itSpinning up auth, a DB, i18n, tests, and lint&#x2F;format&#x2F;CI for each new app was repetitive. This gives me (and hopefully you) a production-ready base in minutes, with opinionated defaults you can start.I’m open to suggestions and feedback, what would you like to see next? I’ll hang around in the comments to answer questions.

Show HN: Open-source Next.js 15 boilerplate – auth, DB, intl, tests, monitoring

I vibe coded Jurn AI - a notion integration that lets your diary &#x2F; journal talk to you.It works by generating feedback from user’s last night journal. This feedback is then sent over mail to the user every morning with the intention of motivating them.The idea is to give a friend&#x2F;family like feel, daily checking up on you based on how your day went by.To vibe code, used following agents, each with its own dedicated folder to store their system prompts and progress.Frontend engineer - knows how to build a nextJS website. Responsible for building the user onboarding ramp.Backend engineer - works with python and fastAPI. Help built the entire server side.Program Manager - knows the requirements and the deadline. Helps keep a track of pending pointers.Product expert - Understands what we are building and why. Helps refine Content on the landing page - optimizing layout for max user conversion. Helps in simplifying decisionsInfra Engineer - To be honest, I wasn’t able to use much of agent’s help in this. Their knowledge was outdated when it came to resolving platform specific bugs.What do you think about this project?

Show HN: A Virtual friend that checks up on you, every morning

Video meeting app for voice ai developers to demo their voice agents to clients.I used LiveKit&#x27;s open source meet app and customized it to bring your own ai voice agents and ai avatars into the video meeting room. Perfect for showing your agents to clients, working out issues, and experiencing conversations in &quot;person&quot; in real time.Uses NextJS and has a couple of backend agent examples in the agents directory, one for voice and one for avatar.Demo video in READMELet me know if you have any questionsSee ya!

Show HN: I built a video meet app integrated with AI voice and avatar agents

Hated using vibe coded stuff, or some UI&#x2F;UX&#x2F;BE whatever broken software, so I decided to build my own.It took me some time, as I built it from the ground up, with a proper BE solution - NestJS, using Redis, Kafka for messaging and more tools to make it actually stable.My landing is with Nextjs for SSR&#x2F;SEO optimsations.I feel like this is becoming the best tool that would compete with all the giants like Buffer, Hootsuite. There are already some paying customers, and they&#x27;re pretty happy by it.I&#x27;m building reporting, more integrations and features, and it&#x27;s crazy good in my opinion, as it works as it should and it&#x27;s FAST.

Show HN: PosFast – Not Vibe Coded Social Media Scheduler

a decade ago i saw &quot;21 movie&quot; and loved this scene <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=CYyUuIXzGgI" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=CYyUuIXzGgI</a>Recently I came across this video again, so I built an interactive web simulator to demonstrate the Monty Hall problem using nextjs.Link: <a href="https:&#x2F;&#x2F;montyhallsim.vercel.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;montyhallsim.vercel.app&#x2F;</a>Would appreciate feedback on it and any edge cases I might have missed :)

Interactive Monty Hall Problem Simulator with Probability Visualization

Hi HN,I’ve been working on a weird little passion project: Flourish &amp; Decay, a board-&#x2F;digital hybrid game inspired by slime-mold and Conway’s Game of Life. It&#x27;s completely decentralized and 100% free to play.What is it?: A tactical deck-builder where you play action cards &#x2F; spend resources to place “cells” onto a game board; they live, die, or mutate based on local rules. Compete with other players to grow the largest over 100 generations!Why I’m sharing: I want feedback from the HN community on:- The game mechanics – are you able to effectively use Conway&#x27;s Game of Life to gain a strategic advantage?- Performance – the app uses instanced meshes and ~many other performance tricks; curious if it runs smoothly on your hardware.- The computer engine - are computers sufficiently &quot;smart&quot; as to enable fun gameplay?- General design&#x2F;UX thoughts.Try it: flourishanddecay.com (demo link) – works in browser, no install.The project is open to iteration; rules, balance, and art are all evolving. Would love your thoughts on gameplay, tech stack (React 19 + R3F v9), or just whether the concept makes sense.Built with React Three Fiber, DREI, NextJS, Trystero and GSAP.Happy to answer any questions about the anti-entropy gossip networking layer (future online multiplayer), the art pipeline (GLTF-JSX, Draco, WebP), or an eventual physical version.BONUS:- Have an idea that would benefit from an Open Source, decentralized, p2p lobby &#x2F; matchmaking? Hit me up. That is completely decoupled from my core game and I&#x27;m trying to carve out time to make it OS.Thanks for checking it out!

Show HN: Flourish and Decay, a digital board game built on Conway's Game of Life

Not OP, but many technologies nowadays push users to use a server-side component when not needed.An example is NextJS where you&#x27;re strongly encouraged[0] to run a server (or use a platform like Vercel), even if what you&#x27;re doing is a fairly simple static site.Combine inconsiderate crawler (AI or otherwise) with a server-side logic that doesn&#x27;t really need to be there and you have a recipe for a crash, a big hosting bill, or both.[0] People see <a href="https:&#x2F;&#x2F;nextjs.org&#x2F;docs&#x2F;app&#x2F;guides&#x2F;static-exports#unsupported-features" rel="nofollow">https:&#x2F;&#x2F;nextjs.org&#x2F;docs&#x2F;app&#x2F;guides&#x2F;static-exports#unsupporte...</a> and go &quot;ah shucks I better have a server component then&quot;

Websites and web developers mostly don't care about client-side problems

Most people use Vite these days or Nextjs

Tidewave Web: in-browser coding agent for Rails and Phoenix

I feel bad that you&#x27;re getting downvotes. The reason is that pretty much every modern web stack decouples the URL routing from the source code directory structure these days. It was a nice hack back in the day, but there are so many problems with it no one really does it any more.Some frameworks (Laravel, NextJS, etc) map from the directory structure to routes, but that&#x27;s just a mapping rather than actually exposing the directories on the server. You can have &#x2F;src&#x2F;agents accessible as &#x2F;agents. Or you could have &#x2F;alice&#x2F;bob&#x2F;agents accessible through &#x2F;agents. It&#x27;s all just build tooling and web server config at the end of the day.

AGENTS.md – Open format for guiding coding agents

# 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