Nextjs // Micro Service Social Previews

[vinnyjth]

🐛 Issue

Closes #195

✏️ Solution

Migrate to Next.js 😅

After much pondering and researching, I'm convinced this is the shortest jump to working meta tags outside of paying for a service like prerender.io. We need the meta tags to be sent over the wire and to be accessible without any JS execution required, and Next.js was a quick hop from our current implementation.

Some notes:

• You can now specify a church slug via the NEXT_PUBLIC_CHURCH_SLUG env variable.
• We are still using React Router DOM. Moving to the nextjs router would require a refactor of all three folders (embeds, microservice, and shared)
• I noticed that our package configuration was valid, but inaccurate. The cracks were beginning to show when spinning up next.js Our modules should depend on the packages they are using, nothing more and nothing less (for the most part). I've started to correct that, but you may need to nuke your node_modules and run yarn from the root as well as microservice to begin working.

🔬 To Test

1. Start the microservice with a env var like

   NEXT_PUBLIC_CHURCH_SLUG=apollos-demo

2. Visit some microserviced pages http://localhost:4000/?id=UniversalContentItem-d7a75b1f-9dbb-4c80-b72a-07ae3d7b70eb

3. Fire up ngrok and test using some social preview testing tools

📸 Screenshots

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
apollos-micro-service	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 28, 2024 1:42pm
apollos-web-embeds	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 28, 2024 1:42pm

[redreceipt]

amazing. i'll review this soon