OneBio Next.js Starter

The OneBio Next.js Starter is a boilerplate project for displaying a OneBio member's Thought Stream on a custom website, built with Next.js, TypeScript, and Tailwind CSS.

What is the OneBio Next.js Starter?

This starter is a Next.js application created by OneBio (oneb.io) that fetches a user's Thought Stream through the OneBio API and renders it on a website the member controls. The required inputs are an API key and a username (including the '@' prefix), both stored as environment variables. The output is a fully styled Thought Stream page that can be customized to match the site's existing design. The project includes examples for importing a Thought Stream and is intended to be deployed to Vercel.

Key Features

• Next.js framework — The starter runs on Next.js, enabling static generation and server-side rendering for the Thought Stream display.
• TypeScript support — The entire project is written in TypeScript, giving type safety for the API integration code.
• Tailwind CSS styling — Styling is built with Tailwind CSS, so you can restyle the stream using utility classes to match your brand.
• OneBio API integration — The starter includes code to call the OneBio API using two environment variables: ONEBIO_API_KEY and ONEBIO_USERNAME (the username must include the '@' symbol).
• Vercel deployment ready — You can deploy directly to Vercel by importing the repository and setting the environment variables to match your .env.local file.
• Git-based workflow — The project can be pushed to GitHub, GitLab, or Bitbucket and then imported to Vercel for cloud hosting.

Who is it for?

• OneBio members who want their Thought Stream to appear on their own website instead of only on oneb.io, so they can control the layout and styling.
• Web developers looking for a clean Next.js + TypeScript + Tailwind starting point to integrate the OneBio API into a larger site or portfolio.
• Personal site owners who want a low-maintenance way to publish their Thought Stream content with a custom look.

What can you do with it?

• Customize stream styling: Use Tailwind CSS to match the Thought Stream's fonts, colors, spacing, and layout to your existing website design.
• Self-host your stream: Display your OneBio content on your own domain rather than on the default OneBio page, keeping your content under your own URL.
• Deploy for free or cheap: Use the Vercel import flow to get the stream live in minutes; the only requirements are a GitHub/GitLab/Bitbucket repository and the OneBio environment variables.

How does it work?

To get a local copy, clone the repository and run yarn install from the project directory. Before running, sign in to oneb.io, generate an API key on the Settings page at https://oneb.io/settings, then add ONEBIO_API_KEY and ONEBIO_USERNAME to your .env file. When deploying, set the same values in Vercel's Environment Variables section.

FAQ

Is the OneBio Next.js Starter free?

The starter project itself can be cloned and used at no cost. Using it requires a OneBio account to generate an API key; OneBio's own pricing is separate from this template.

How do I get a OneBio API key?

Sign in to your account at https://oneb.io, go to the Settings page at https://oneb.io/settings, and copy the API key from there. Then add it along with your OneBio username (including the '@') to your environment variables.

What environment variables are needed?

Two variables are required: ONEBIO_API_KEY and ONEBIO_USERNAME. The username must include the leading '@', for example @username. These should be stored in a .env file locally and in your deployment provider's environment settings.

Can I deploy this to Vercel?

Yes. Push the project to GitHub, GitLab, or Bitbucket, import it into Vercel, and add the environment variables in the Vercel dashboard. The readme notes that the environment variables on Vercel must match your local .env.local file.