Hey, what's sup everyone! I hope you've liking the initiative I've started, apologies for skipping the last week, but here's the next release. Recently some people suggested me to focus on single topics and complete them in one blog post, so I'll try that from the next time!
Coming to today's blog, we'll talk about using Strapi as a headless CMS and making things easier with RESTful APIs, Caching in Next.js and using multiple fonts with improved performance.
Extending Frontend with Strapi: The Headless CMS
In the last post, we talked about using WordPress as a Headless CMS to build a frontend while using the most of WordPress backend, but it comes with a lot of hurdles and it doesn't make much sense because WordPress has its own frontend. Then, what to do? Let's use Strapi.
Headless just means there's no built-in display, you choose how to shine your content light. Boom! Freedom unlocked!
Strapi, the leading open-source headless CMS, is here to break free from the traditional mold and empower you to manage your content like never before.
Strapi decouples this content backend from the presentation layer, giving you the freedom to display it on any platform – websites, mobile apps, smart devices – the possibilities are endless!
Think of Strapi as a content vault, storing your data like juicy nuggets**.** Instead of being stuck in one box (website), you can use magic pipes (APIs) to send it anywhere - phones, websites, even spaceships (Just Kidding 😂)! This gives you ultimate flexibility to show your content on any platform.
Here's why to use Strapi:
Developer-friendly: Built with love for JavaScript and TypeScript, Strapi speaks your language. I come with a super-clean, customizable API, intuitive plugins with its own marketplace, and an amazing developer experience.
Flexible Content: Stranglehold on your content? Strapi allows to use a flexible content structure, create custom roles and permissions, and watch your content breathe in the open air.
Blazing-fast performance: Speed demon on a caffeine shot? Strapi provides superfast API responses to the requests without sacrificing any API compliances.
Scalability: No more limitations? The headless architecture of Strapi makes it inherently scalable. As your application grows, Strapi can handle increased content loads without sacrificing performance.
Community driven & Open source: Stuck? Nope! Strapi boasts a vibrant community of developers and content creators, ready to lend a helping hand or cheer you on.
Confession Time: My thoughts on Strapi
I used to be a traditional CMS loyalist, yeh you know that already, the WordPress. Sure, I'd heard whispers of headless alternatives, but the whole "decoupled" thing sounded like a recipe for complexity. Then, I stumbled upon Strapi. And let me tell you, it's been a revelation.
First off, the flexibility is mind-blowing. I'm no longer chained to a pre-built website themes and PHP hooks to get something done on my frontend. Strapi lets me create the backend content model like clay, defining data structures that fit my needs like a glove. Blog posts? Check. Product pages with intricate variations? Done. A custom landing page for a social media campaign? It's a piece of cake.
But it's not just about flexibility. The developer experience is a breath of fresh air. As a developer myself, I appreciate the clean, well-documented API and the ease of integration with other tools. It just saves my time when I used to wrestle with clunky plugins or fighting against convoluted code. Strapi lets me focus on what I do best – building amazing things.
And then there's the speed. My website used to be a sluggish sloth, dragging its pixels across the screen. With Strapi, it's a nimble gazelle, loading content with lightning-fast responsiveness. This isn't just about SEO; it's about keeping my users engaged and happy.
Of course, no journey is perfect. There's a learning curve with any new technology, and headless CMS is no exception. But the community is fantastic. From helpful tutorials to active forums, there's always someone willing to lend a hand. And the ongoing development of Strapi is inspiring, with new features and improvements popping up like mushrooms after a rain.
So, if you're tired of feeling stuck in a content rut, if you crave the freedom to innovate and build without limitations, I urge you to take a peek at Strapi. It's not just a headless CMS; it's a gateway to a whole new world of content possibilities. And who knows, maybe you'll have your own headless revelation too.
Caching in Next.js
Recently, Vercel (Lee Robinson) released a complete guide on Cache Implementation in Next.js and it's a must watch for every web developer trying to speed up their React-based applications.
Using Fonts in Next.js
Next.js makes it very easy to use fonts in the application using the next\font library. next\font automatically fetch your fonts (including custom fonts) from the external servers and self-host them within the application for improved privacy and performance, ultimately reducing external requests.
eg. Using multiple fonts in Next.js
import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
display: 'swap',
})
const roboto_mono = Roboto_Mono({
subsets: ['latin'],
variable: '--font-roboto-mono',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
<body>
<h1>My App</h1>
<div>{children}</div>
</body>
</html>
)
}
Source: Optimizing: Fonts | Next.js (nextjs.org)
Next.js 14.1: Improved DX, Self-Hosting, and Image Optimization
The new release of Next.js 14.1 is here, and it comes with a lot of improvements in Turbopack, Developer Experience and Self-hosting.
Focus on Developer Experience: This update prioritizes making Next.js development smoother and more enjoyable. Improved self-hosting, Turbopack enhancements, and refined error messages are just some of the improvements.
Parallel & Intercepted Routes: This feature receives 20 bug fixes and new capabilities like catch-all routes and Server Actions, leading to more complex and performant routing patterns.
next/image Enhancements: The popular image component adds support for <picture> tags, art direction, and dark mode, giving you more control over image presentation.
Overall: Next.js 14.1 improved the framework while adding powerful new features, solidifying its position as a top choice for React developers.
Read release notes: https://nextjs.org/blog/next-14-1
The Conclusion
So, that was it for this blog, there wasn't much to share this week due to engagements with work. Also, planning to upgrade my existing website (aryn.tech) and launch some new stuffs, so make sure you've signed up for the newsletter to stay updated.
From the next blog, I'm introducing a new section for System Design from the next blog, where we'll take one concept from the system design and explain it in layman's term.
