How to add the OSS Friends page to your Next.js website

#opensource #webdev #nextjs #tutorial

What you will find in this article?

In the open-source community, collaboration and connections are key. An OSS (Open Source Software) Friends page on your website can showcase the community that contributes to and supports your projects. In this article, we'll guide you through creating an OSS Friends page using an API to fetch and display the latest OSS projects.

Let's help open source projects grow toghether by adding an OSS Friends page to your website!

Papermark - the open-source DocSend alternative.

Before we kick it off, let me share Papermark with you. It's an open-source alternative to DocSend that helps you securely share documents from PDFs to Notion pages and get real-time page-by-page analytics from viewers. It's all open-source!

I would be grateful if you could give us a star! Don't forget to share your thoughts in the comments section ❤️
https://github.com/mfts/papermark

Building the `oss-friends` page

Now that we have our setup in place, we are ready to start building our application.

We'll be using the Formbricks API to fetch the latest OSS friends. Using the Next.js App router we'll create a new page /oss-friends and fetch the data from the API. We'll then render the data on the page.



// app/oss-friends/page.tsx
import { Button } from "@/components/ui/button";
import Image from "next/image";

type OSSFriend = {
  href: string;
  name: string;
  description: string;
};

export default function Friends() {
  const friends: OSSFriend[] = await fetch(
    "https://formbricks.com/api/oss-friends",
    {
      next: {
        revalidate: 3600,
      },
    }
  )
    .then(async (res) => res.json())
    .then(({ data }) => data)
    .catch(() => []);

  return (
    <div className="bg-white px-6 py-24 sm:py-32 lg:px-8 ">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
          Open Source Friends
        </h2>
        <p className="mt-4 text-lg leading-8 text-gray-600">
          Meet our friends who also building and contributing to Open Source.
        </p>
      </div>
      <ul
        role="list"
        className=" mt-12 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
        {friends.map((friend) => (
          <li
            key={friend.name}
            className="overflow-hidden rounded-xl border border-gray-200 flex flex-col justify-between">
            <div>
              <div className="text-xl font-medium leading-6 text-gray-900 pb-1 px-6">
                {friend.name}
              </div>
              <p className="px-6 mt-2 text-gray-600 text-sm ">
                {friend.description}
              </p>
            </div>
            <div className="text-left px-6">
              <a
                href={friend.href}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-block w-full">
                <Button
                  type="button"
                  className="mt-4 mb-6 rounded-md bg-black text-sm font-semibold text-white shadow-sm">
                  Learn more
                </Button>
              </a>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Submit your OSS project to OSS Friends

Now that we have our OSS Friends page ready, let's submit our OSS project to the API. We'll be using a submission form to submit our project.

The criteria to be accepted as an OSS Friend is straightforward:

The project must be open-source.
The project must have more than 100 stars on GitHub.
The project must be actively maintained.
You have already added a /oss-friends page to your website.

If you meet the criteria, you can submit your project to the API using the form.

Conclusion

Welcome to the friend-zone :) Now, please share your open source project in the comments section below. I would love to check it out!

Thank you for reading. I am Marc, an open-source advocate. I am building papermark.io - the open-source alternative to DocSend.

Have fun building!

Help me out!

If you found this article helpful and support other open source friends, I would be super grateful if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark