DEV Community

Cover image for How to add the OSS Friends page to your Next.js website
Marc Seitz
Marc Seitz

Posted on

26 13 14 13 12

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

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!

friends

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

Papermark App

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>
  );
}


Enter fullscreen mode Exit fullscreen mode

Papermark's OSS Friends Page

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:

  1. The project must be open-source.
  2. The project must have more than 100 stars on GitHub.
  3. The project must be actively maintained.
  4. 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

dog thanks

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (17)

Collapse
 
vince_hirefunnel_co profile image
Vince Fulco (It / It's) β€’

Got a typo, this post says 100 github stars, the actual page says 200. All the best,

Collapse
 
mfts profile image
Marc Seitz β€’

Good catch πŸ‘ thanks yes it should be minimum 200 stars

Collapse
 
matijasos profile image
Matija Sosic β€’

Good to know about this! This also gives me a lot of ideas for OSS SaaS projects to feature next :)

Collapse
 
mfts profile image
Marc Seitz β€’

Yes 100%

Collapse
 
kubernaut profile image
Louis Weston β€’

Thanks for sharing! That sounds cool :)

Collapse
 
mfts profile image
Marc Seitz β€’

join the gang πŸ€—

Collapse
 
nathan_tarbert profile image
Nathan Tarbert β€’

Nice walkthrough @mfts!

Collapse
 
mfts profile image
Marc Seitz β€’

Thanks Nathan

Collapse
 
fernandezbaptiste profile image
Bap β€’

Sounds cool! Thanks for sharing :)

Collapse
 
mfts profile image
Marc Seitz β€’

You got it πŸ‘

Collapse
 
annaredbond profile image
annaredbond β€’

We definitely want to join the gang!

Collapse
 
mfts profile image
Marc Seitz β€’

Yaaaas

Collapse
 
shnai0 profile image
Iuliia Shnai β€’

More open source friends πŸš€

Collapse
 
mfts profile image
Marc Seitz β€’

the more the merrier

Collapse
 
phuldev profile image
Phuldev Mandal β€’

Thanks for sharing 😊

Collapse
 
mfts profile image
Marc Seitz β€’

You’re welcome πŸ‘

Collapse
 
skushagra9 profile image
Kushagra Sharma β€’

I am getting a cors error while using vue

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay