[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/hashtag",{"_7":8,"_9":10,"_11":12},"articles",[13,14,15],"authors",{},"tag","nextjs",{"_16":89,"_18":90,"_20":91,"_22":23,"_24":71,"_26":92,"_28":93},{"_16":68,"_18":69,"_20":70,"_22":23,"_24":71,"_26":72,"_28":73},{"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29},"content","Imagine content could live on the internet, completely decoupled from the\nplatform someone chooses to consume it on. Well, guess what, the future is here!\n\nThe nostr protocol is perfect for sharing content because it is client-agnostic.\nIt even comes with a special event type for long-form content,\ntaxonomy, markdown support, etc.\n\nYou can use nostr as your personal headless content management platform\nand weave it into your NestJS website.\nIn this blog post, I'll explain how.\n\n## Requirements\n\nBefore we get started lets talk about what needs to happen\nin order to display your nostr posts on your personal website.\nWe are going to use a couple of libraries as well as NextJS.\n\n### Getting content from the nostr network\n\nFirst, we gotta connect to some nostr relays and query them for your blog posts.\nWe are going to use `nostr-tools` for that.\nNostr-tools is like a Swiss army knife for anything nostr-related\n\n### Extracting metadata from the posts\n\nSEO is important for any web blog. So we are going to use the native support\nfor taxonomy in nostr long-form content to generate metadata like tags and OG data.\nWe are going to use NextJS inbuilt metadata functionality.\n\n### Rendering markdown\n\nFinally, we need to take the markdown string we got from the relay and\nconvert it into HTML to return it from our server.\nThere are many libraries to render Markdown in React, but only\na few support React Server Components. We are going to use\n`next-mdx-remote` for this.\n\n## Creating our blog post component\n\nOur BlogPost component will be responsible for retrieving a specific blog post\nfrom the nostr network and then parsing its content into HTML.\nThis component is going to be an asynchronous server-rendered component.\nHere is a basic code example.\n\n```ts\nimport { MDXRemote } from \"next-mdx-remote/rsc\";\n\nasync function BlogPost({ nevent }: {nevent: `nevent1${string}`}) {\n const event = await getCachedSinglePost(nevent);\n if (!event || event.pubkey !== authorData.pubkey) {\n notFound();\n }\n return (\n

\n \n

\n );\n}\n\nexport default BlogPost;\n```\n\nSo what is going on here? BlogPost is an asynchronous component that\nreceives a `nevent` entity as prop.\nIt then proceeds to look up the event in question.\nIf none is found, it will return a 404 using NextJS' notFound function.\nFinally it passes the event's content on to `MDXRemote` which takes care of the parsing.\n\n### Getting a post from nostr\n\nLets take a look at our `getCachedSinglePost` function, shall we?\n\n```ts\nimport { Event, SimplePool, nip19 } from \"nostr-tools\";\nimport { cache } from \"react\";\n\nconst pool = new SimplePool();\n\nasync function getSinglePost(nevent: Nevent): Promise {\n const {\n data: { id, relays },\n } = nip19.decode(nevent);\n const relayList =\n relays && relays.length > 0 ? relays : [\"wss://relay.damus.io\"];\n const event = await pool.get(\n relayList,\n {\n ids: [id],\n },\n { maxWait: 2500 },\n );\n if (!event) {\n return undefined;\n }\n return event;\n}\n\nexport const getCachedSinglePost = cache(getSinglePost);\n```\n\nThis function is responsible for parsing our nevent string,\nconnecting to the nostr network\nand receiving the event in question.\nHere is a quick rundown:\n\n1. Parsing the nevent entity for the event id and relay hints\n2. If no relay hints are present, we fall back to a default\n3. We are using nostr-tools `SimplePool` to connect to a pool of relays\n and look up the id in question\n4. If after 2.5 no event is found we return `undefined`, otherwise the event\n5. Optional: In order to avoid unnecessary duplications we use react's cache function.\n It will make sure that even if called multiple times in a single request,\n it is only executed once.\n\n### Extracting additional info\n\nNostr long-form content comes with standardized tags for\nfeatured-images, taxonomy, summary, title, and so on.\nAll that information can be found in an events tags array.\nWhat follows is a utility function to extract these tags from an event:\n\n```ts\nexport function getTagValue(e: Event, tagName: string, position: number) {\n for (let i = 0; i < e.tags.length; i++) {\n if (e.tags[i][0] === tagName) {\n return e.tags[i][position];\n }\n }\n}\n\nconst title = getTagValue(event, \"title\", 1);\nconst summary = getTagValue(event, \"summary\", 1);\n```\n\nThis can be used to add a H1 heading to our BlogPost component:\n\n```ts\nasync function BlogPost({ nevent }: {nevent: `nevent1${string}`}) {\n const event = await getCachedSinglePost(nevent);\n if (!event || event.pubkey !== authorData.pubkey) {\n notFound();\n }\n const title = getTagValue(event, \"title\", 1);\n return (\n

{title}

\n \n

\n );\n}\n\nexport default BlogPost;\n```\n\n### Styling our Markdown\n\n`MDXRemote` takes care of parsing our Markdown into HTML.\nIf you have global styles setup for all the required HTML tags,\nthen you are good to go, but if you rely on classes,\nyou will need to add custom components to MDXRemote.\nTo do so, create an object `components` with a function representing each\nTag you wish to replace and pass it to MDXRemote.\nOur final might look something like this:\n\n```ts\nconst components = {\n p: (props: any) => (\n

\n {props.children}\n

\n ),\n};\n\n\nasync function BlogPost({ nevent }: {nevent: `nevent1${string}`}) {\n const event = await getCachedSinglePost(nevent);\n if (!event || event.pubkey !== authorData.pubkey) {\n notFound();\n }\n const title = getTagValue(event, \"title\", 1);\n return (\n

{title}

\n \n

\n );\n}\n\nexport default BlogPost;\n```\n\n## Creating a blog post page with metadata\n\nIn the next step, we will create a dynamic route segment\nand within render the component we just created.\nFor my blog, I went with `domain.com/blog/[nevent]`.\nTo achieve this path with NextJS' app router we create a file\nwith this path: `src/app/blog/[nevent]/page.tsx`.\nThe brackets will tell NextJS that this is a dynamic route segment\nand will automatically pass the parameter to the page component\nas props.\n\nHere is our starting point:\n\n```ts\nfunction BlogEntry({ params }: {params: {nevent: `nevent1${string}`}}) {\n return (\n Loading...

}>\n \n \n );\n}\n\nexport default BlogEntry;\n```\n\nIn this page component, we use the BlogPost component we created in the first step.\nWe pass to it the nevent that we receive from the router.\nBecause this component is asynchronously rendered, we wrap it in a Suspense boundary,\nin order to render a fallback, while the BlogPost component is still fetching data.\n\n### Adding metadata\n\nOf course, our blog posts need metadata for SEO and sharing.\nNextJS comes with an inbuilt function that lets you dynamically\ngenerate a metadata object, that will be sent along with each request.\n\nWe simply add the following code to our `page.tsx` file\n(but outside the component itself).\n\n```ts\nexport async function generateMetadata({\n params,\n}: BlogEntryProps): Promise {\n const event = await getSinglePost(params.nevent);\n if (!event) {\n return {};\n }\n const title = getTagValue(event, \"title\", 1);\n const image = getTagValue(event, \"image\", 1);\n return {\n title,\n openGraph: {\n title,\n images: [image || \"\"],\n },\n twitter: {\n title,\n images: [image || \"\"],\n },\n };\n}\n```\n\nNotice that we called `getSinglePost` a second time, but because we wrapped\nits functionality in `cache` it will only get executed once.\nWe then use our `getTagValue` utility to extract metadata from our event and\nreturn a Metadata object as required by NextJS.\n\n### Statically prerendering your posts\n\nDynamic route segments are rendered on request by default, but for performance\nreasons it might be wise to render them beforehand. NextJS allows you to\nspecify a list of route ids that you wish to render at build time using the\n`generateStaticParams` function.\nSimply add this function outside the page component but in the same file.\n\n```ts\nexport async function generateStaticParams() {\n const [events, relays] = await getCachedAllPosts(\"YOUR PUBKEY HERE\");\n return events.map((event) => ({\n nevent: nip19.neventEncode({ id: event.id, relays }),\n }));\n}\n```\n\n`getAllPosts` is another cached function that looks like this:\n\n```ts\nconst relays = [\"wss://relay.damus.io\"];\n\nasync function getPostsByAuthor(pubkey: string): Promise<[Event[], string[]]> {\n const events = await pool.querySync(relays, {\n kinds: [30023],\n authors: [pubkey],\n });\n return [events, relays];\n}\n\nexport const getCachedAllPosts = cache(getPostsByAuthor);\n```\n\nThis function will get all long-form posts on a list of relays\nand then add their nevent entity ids to an array as expected by NextJS.\nNext will then use this array to generate these paths at build time.\n\n## Wrapping Up\n\nWe have now successfully created a BlogPost component that looks up an event on nostr\nand parses its Markdown contents into HTML.\nWe also created a dynamic route segment that receives and nevent entity as a parameter,\nlooks up metadata for it and renders our BlogPost component.\n\nI used the exact same approaches to build my personal blog [my2sats](https://my2sats.space),\nso if you are interested in a real-life code example take a look at its [repository](https://github.com/Egge21M/my2sats)\n(and let me know if you find any bugs ^^).\n\nIf you have any questions about this guide please contact me on\n[nostr](nostr:npub1mhcr4j594hsrnen594d7700n2t03n8gdx83zhxzculk6sh9nhwlq7uc226)\nor on [Twitter](https://twitter.com/Egge21M)\n","created_at",1704953956,"id","754d450366f0e5835e61958a9e86041e06d1bc3d6a3c8a17d88e40c12a8ef6db","kind",30023,"pubkey","ddf03aca85ade039e6742d5bef3df352df199d0d31e22b9858e7eda85cb3bbbe","sig","1d8373401494bcb5ebb1cf352f63cfa6f59f13232eac2c2ddd0839af7cd38d8d6645e8d096bc41af6f1f13b1c86d0f7c1ed7590a1492807a736959ae56cd867e","tags",[30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],[66,67],[64,65],[62,63],[60,61],[54,59],[54,58],[54,16],[54,12],[54,57],[54,56],[54,55],[52,53],[50,51],[46,47,48,49],[45,25],"p","client","31990:7d4e04503ab26615dd5f29ec08b52943cbe5f17bacc3012b26220caa232ab14c:1687329691033","wss://relay.nostr.band","web","alt","This is a long form article, you can read it in https://habla.news/a/naddr1qqxnzdesxsun2veexqcnsd35qgsdmup6e2z6mcpeue6z6kl08he49hcen5xnrc3tnpvw0mdgtjemh0srqsqqqa28ffz9u0","image","https://image.nostr.build/718067418b97417452b31cd2f75c2babde9024cef838f9542ea9f31379779491.png","t","writing","creator","long-form","blog","nostr","published_at","1704953956","summary","You can use nostr as your headless content management platform and weave it into your NestJS website. In this blog post, I'll explain how.","title","How to build a nostr-driven blog with NextJS","d","1704953901864","# How to Launch a SaaS in 2026\n\nA complete guide to building and launching a SaaS product with Next.js 16.\n\n## Tech Stack\n\n- **Framework:** Next.js 16 with App Router\n- **Language:** TypeScript\n- **Auth:** NextAuth v5 (email + OAuth)\n- **Payments:** Stripe\n- **Database:** Prisma 7 with PostgreSQL\n- **Styling:** Tailwind CSS 4\n- **Hosting:** Vercel or Netlify\n\n## Step 1: Setup\n\n\n\n## Step 2: Authentication\n\nInstall NextAuth v5 and configure providers:\n- Email (magic link)\n- Google OAuth\n- GitHub OAuth\n\n## Step 3: Payments\n\nIntegrate Stripe for subscriptions:\n- Checkout Sessions\n- Webhooks for events\n- Customer Portal for self-service\n\n## Step 4: Database\n\nUse Prisma 7 for type-safe database access.\n\n## Step 5: Launch\n\n1. Create a landing page\n2. Set up analytics\n3. Submit to Product Hunt\n4. Post on Hacker News\n5. Share on social media\n\n---\n\nWant a production-ready boilerplate with all of this pre-configured? [Get ShipKit and 6 more products for pay-what-you-want](https://rentry.co/dev-tools-pay-what-you-want).",1778697893,"6e9e266de9ad9546316a4e8331d4f4dd06f67338b1101f6d165d778770f1e681","a6af8aa16b1a8702a64217221085c94fa3da8d3663054b80ad35c32cd9eaaedb","b769d65619fd1a13a042a3ee7a893468e343723c9aaa6488ea00bb5b119b944d02745e953838bf8e3896a58f43b2dc3b1b916a947951ffadd12ffe5bee0eed9a",[74,75,76,77,78,79,80,81],[66,88],[64,87],[62,86],[54,85],[54,12],[54,84],[54,83],[60,82],"1778697893","webdev","indiehacker","saas","Step-by-step guide to launching a SaaS product with Next.js 16, including auth, payments, and deployment.","How to Launch a SaaS in 2026 - Complete Guide","saas-launch-guide-2026","# I Built 7 Developer Products and Made Them Pay-What-You-Want\n\n## The Products\n\n1. **ShipKit** - Next.js 16 SaaS Boilerplate with Auth (NextAuth v5), Stripe subscriptions, Prisma + PostgreSQL, admin dashboard. Everything you need to launch a SaaS.\n\n2. **Tailwind Component Pack** - 30+ production-ready components. Buttons, cards, forms, modals, navigation, pricing tables, hero sections.\n\n3. **Email Template Pack** - 15 transactional email templates with MJML source.\n\n4. **React Hooks Library** - 10 custom hooks with TypeScript.\n\n5. **Admin Dashboard** - Charts, tables, user management.\n\n6. **Portfolio Template** - Developer portfolio with projects.\n\n7. **Blog Template** - MDX powered with syntax highlighting.\n\n## Why $1+?\n\nDeveloper tools should be accessible. $1 minimum means anyone can afford it. The bundle is worth $323+ at retail.\n\n## Free Tools\n\nI also created 50+ free cheat sheets and tools:\n- Linux, Python, React, Next.js, TypeScript, Docker, Kubernetes cheat sheets\n- JSON Formatter, Base64 Encoder, CSS Grid Generator\n- 50 JavaScript Interview Q&A\n\nGet the bundle for $1+: https://rentry.co/dev-tools-pay-what-you-want\n\nFree tools: https://rentry.co/pgib9826",1778701044,"97ecabe7d83ece3001d75100acfff9fe590e3531f63ea9247daf2470d5afeb7e","193f175c96839e3fdfa0d7dd3f07555a46ee7e9ee927eb11bf8b7b20997f8952b77e382500141b5894dfbeaf29dbf50a23e289ce99971dd7483eab50167d5d44",[94,95,96,97,98],[66,99],[54,85],[54,12],[54,83],[54,84],"7-dev-products-pwyw"]