June 2025 Summaries

Nuxt.js, a progressive web framework based on Vue.js, enhances the deployment of applications to edge computing platforms by leveraging its Nitro engine, which supports route handlers, build presets, and minification. This enables applications to run JavaScript closer to users, providing low-latency experiences and efficient performance through features like zero milliseconds cold starts and request isolation. Integrating with tools like Strapi, a headless CMS, Nuxt.js facilitates content management and authentication while maintaining flexibility and scalability in application architecture. Developers can deploy Nuxt.js applications on various edge platforms such as Cloudflare, Netlify, and Vercel, using preset build commands to optimize for specific environments. The framework also supports modular architecture, pre-rendering, server-side rendering, and automatic code-splitting, ensuring efficient resource use and improving user experience without compromising on speed or privacy.

REST APIs, or Representational State Transfer Application Programming Interfaces, enable communication between computer systems using HTTP, providing a standardized method for software to interact. They are designed following principles such as statelessness, resource-based structure, client-server separation, and uniform interfaces, which make them scalable, flexible, and easier to manage compared to older protocols. RESTful APIs use HTTP methods like GET, POST, PUT, PATCH, and DELETE to perform operations on resources identified by URLs. A REST API request includes an endpoint URL, method, headers, body, and optional query parameters, while responses typically contain a status code, body, and headers, often using JSON format. Authentication is commonly managed through API keys, bearer tokens, or OAuth 2.0. Strapi, a headless CMS, can quickly generate RESTful APIs, allowing users to perform CRUD operations on content types with minimal setup, making it a valuable tool for learning and rapid prototyping.

In this comprehensive blog tutorial, readers are guided through the process of customizing the Strapi Admin panel by developing a custom Truck Tracker plugin for Strapi version 5. This plugin enables users to manage delivery trucks, update their real-time locations using a map, and display all trucks on a live dashboard widget. The tutorial covers creating a content type for storing truck details and GPS coordinates, building a custom map input field (GeoPicker) for visually selecting truck locations, and creating a dashboard widget using React Leaflet to show all trucks on a map. Additionally, it includes setting up an API endpoint for GPS device updates, implementing logic to track when each truck's location was last updated, and adding secure backend routes with custom middleware. The guide is particularly useful for those interested in learning more about Strapi's inner workings and building practical applications with it, and it offers a video tutorial on YouTube for visual learners.

Strapi CMS offers a flexible and customizable platform that addresses the disconnect between developers and content teams by allowing for tailored solutions that cater to specific workflow needs. Nascent has leveraged Strapi's open-access code to build custom plugins and middleware, enhancing the editing experience and improving security without the need for a complete system overhaul. Strapi Cloud further supports scalability by allowing teams to transition workflows and configurations seamlessly to the cloud. By understanding team workflows and utilizing built-in features like Live Preview and Dynamic Zones, developers can create efficient content management systems that are both user-friendly and sustainable. This approach not only optimizes backend processes but also fosters a more cohesive and productive content creation environment, making Strapi a trusted tool for teams looking to streamline their operations and encourage growth.

Astro.js is a web meta-framework that provides a server-first philosophy, zero JavaScript by default approach, and an islands architecture to deliver fast content-driven websites. Astro's core features include its design for content, speed benefits through static generation and server-side rendering, support for JavaScript frameworks, developer love from recent State of JavaScript surveys, and server islands for pre-rendering dynamic parts while keeping the bulk of the page load quickly. Astro also offers a unified way to manage local content using Content Collections, which provides a structured, fully typed, and validated way to manage local content. The framework seamlessly integrates with external data sources like Strapi through its content loader API, making it ideal for teams who care deeply about performance, simplicity, and developer experience.

The guide provides a step-by-step process for building a portfolio website using Strapi as the headless CMS and Next.js as the frontend framework. With this setup, developers can create a visually stunning and highly functional site that showcases their skills and projects while providing a seamless user experience. The guide covers essential topics such as installing and configuring Strapi, creating custom content types for portfolio items, securing API permissions, adding sample content, customizing API responses, and implementing dynamic routing for individual projects and the overall projects overview page. Next.js's Incremental Static Regeneration (ISR) feature is also leveraged to enable automatic updates of static content after building the site. This approach allows developers to maintain control over their portfolio while ensuring excellent performance, SEO, and user experience.

Conversion rate optimization (CRO) is a data-driven approach to improving website or app performance by systematically analyzing user behavior and making informed decisions based on real-time data. It's not just about changing marketing copy or button colors, but about using analytics and testing to make your site function better for real users. CRO focuses on making better use of existing traffic, increasing revenue, and improving UX simultaneously. Developers play a crucial role in this process by building clean, modular code that enables faster load times, easier A/B testing, and more dynamic personalization. Modern content management systems like Strapi 5 can significantly enhance CRO efforts by enabling flexible, personalized content delivery. Effective CRO benefits multiple teams, providing clear metrics for developers, user insights for product managers, and increased marketing campaign efficiency. The best CRO strategies focus on data-driven decisions, user-centric design, and continuous testing to validate ideas before scaling. Tools like Strapi 5 support these approaches, allowing teams to deliver personalized content experiences that drive real results. CRO connects the technical decisions made with measurable business outcomes, changing how developers approach every line of code. The way users interact with your application is shaped by your code, and those interactions have an impact on financial results. Reducing page load time can increase conversion rates by 2-4%. Developers should focus on building a system that keeps improving over time, using data to inform decisions, and reducing the risk of rework. CRO gives you a framework for identifying which parts of your system are conversion-critical and worth optimizing first. It's about turning assumptions into measurable wins, not chasing more traffic. By implementing CRO, businesses can achieve high returns on investment with even small improvements generating significant revenue. The process combines behavioral insights, analytics, and structured testing to turn assumptions into measurable wins. CRO is a methodical, data-backed approach that starts by identifying important conversion types, analyzing user behavior, gathering qualitative insights, creating hypotheses, testing them, reviewing the results, and iterating. Techniques like A/B testing, personalization, social proof, trust signals, retargeting, and triggered messages can significantly boost e-commerce conversion rates. CRO isn't a one-off project but an ongoing process of improvement that builds momentum over time. It starts with systematic testing, followed by regular testing schedules to maintain momentum, and document everything learned to share across teams. With modern content management systems like Strapi 5, developers can implement CRO efforts efficiently, using APIs for real-time content adaptation based on user data. The API-first approach enables serving different content to different user segments without rebuilding templates or waiting for deployment cycles. Quality beats quantity in CRO testing, so it's essential to run the right tests, not just lots of tests.

A travel blog can be built using a custom-built platform, allowing for complete control over content structure and presentation. This is achieved through the use of modern headless architecture, which separates content management from frontend implementation. Strapi's headless CMS provides the technical foundation for building a scalable travel blog, enabling developers to focus on creating compelling content while handling frontend implementation independently. By modeling content based on how adventurers search and consume information—by destination, style, and media—you can streamline your editorial workflow and create discoverable, organized content. Next.js offers a powerful framework that integrates seamlessly with Strapi's API-first architecture, enhancing performance by offering fast page loads, automatic static generation, and dynamic routing. Tailwind CSS is used for styling, providing a utility-first approach to creating responsive, modern designs without writing custom CSS. Image optimization improves website performance by reducing file size of images without compromising quality. Deploying the blog from development to production requires a robust deployment strategy, including continuous deployment with GitHub Actions for frontend and Docker Compose for Strapi. The choice of hosting services such as Vercel or Netlify for frontend and Strapi Cloud or DigitalOcean App Platform for backend can optimize content delivery and scale infrastructure incrementally. Extending the blog involves developing custom plugins to enhance content creation, engaging with the Strapi community, and exploring ready-made solutions in the plugin marketplace.

Data-driven testing with Playwright, an open-source Node.js library for browser automation, offers a scalable approach to automate and validate numerous scenarios without duplicating code, enhancing both test coverage and maintainability. By decoupling test logic from test data, developers can efficiently run tests across multiple input combinations sourced from external files like CSV or JSON, databases, or APIs. This method aligns with software engineering best practices such as the DRY principle and separation of concerns, allowing for more manageable and scalable test suites. The integration of Playwright with development tools and workflows, such as Node.js and TypeScript, further streamlines the process, while libraries like csv-parse and dotenv simplify data management and environment configuration. Implementing hooks and environment variables facilitates consistent testing environments, making it easy to manage setup, teardown, and configuration across different datasets. These strategies, along with parallelization and systematic edge case testing, enhance the efficiency and reliability of production-scale testing, helping teams reduce defects and accelerate deployment cycles.

Picture this: you've built an amazing application, but users in Germany and Japan can't enjoy it because you didn't prepare for multiple languages. This scenario highlights why localization and internationalization are important for global success. A content localization strategy can help transform your content delivery approach, ensuring that your messaging, design, and user experience are tailored to the cultural nuances, language preferences, and behaviors of local audiences. Effective localization adapts your digital offerings to match what different cultures expect, unlocking new revenue streams and forging stronger global connections using powerful tools like Strapi 5, which was designed with global content strategies in mind. To build an effective content localization strategy, you need to conduct market and cultural research for informed localization decisions, select the right localization tools, including Strapi 5, Translation Management Systems (TMS), and AI-powered translation tools, implement testing, analyze performance, and apply global SEO best practices to increase visibility across regions. A successful localization strategy connects your business with global audiences while maintaining brand consistency, treating it as an ongoing process that integrates into development cycles, chooses technology that supports API-driven architectures and multichannel content delivery, forms cross-functional teams, and continuously analyzes performance and gathers regional feedback to refine the strategy.

Your website has mere seconds to capture a visitor's attention before they move on to a competitor. Building a robust website personalization strategy is both a technical challenge and a golden opportunity for developers, as it can boost conversion rates and enhance the user experience. Personalization tailors digital experiences by dynamically adjusting content based on visitor data, behavior, and preferences, going beyond static pages to drive engagement and conversions. Effective personalization strategies analyze user data to deliver custom content, recommendations, and CTAs that align with where visitors are in their customer journey, resulting in lower bounce rates and longer session durations. Implementing personalization requires balancing technical aspects like data collection, real-time tracking, and dynamic content delivery while maintaining optimal site performance and load times. The return on investment is significant, as personalized experiences increase conversion rates, foster stronger user connections, and improve customer retention, especially in eCommerce contexts. Personalization involves analyzing user data to deliver custom content and recommendations that feel tailored to each visitor, such as showing different product suggestions based on browsing history or adjusting content based on a visitor's location. Website personalization drives stronger engagement by tailoring content to each visitor's interests, behavior, and location, making the difference between converting a visitor or losing them forever. Personalization improves site performance by aligning content with user intent, resulting in lower bounce rates, longer session durations, higher conversion rates, especially in eCommerce, where dynamic content can guide users more efficiently toward purchase. Personalization also helps brands build long-term trust by consistently delivering relevant content that aligns with user preferences and context, leading to increased loyalty and retention. To deliver meaningful personalization at scale, a website needs a foundation that combines structured data, real-time content delivery, and intelligent decision-making. The five essential components of a modern website personalization stack include first-party data infrastructure, behavioral segmentation engine, real-time content delivery layer, machine learning integration layer, and recommendation algorithms. A flexible, API-first CMS like Strapi v5 can help teams create experiences that adapt in real time and resonate across channels. First-party data is the most reliable and privacy-friendly foundation for personalization, involving types of first-party data such as behavioral data, form submissions, purchase history, and session activity. Behavioral segmentation engine involves analyzing user behavior to deliver custom content and recommendations that feel tailored to each visitor, while real-time content delivery allows adapting what users see based on their live session context without full page reloads. Machine learning integration layer enables delivering personalized content at scale by analyzing historical behavior, real-time signals, and user preferences to make predictions that feel tailored and intuitive. Recommendation algorithms such as Collaborative Filtering and Content-Based Filtering select the right content or products based on a user's historical and real-time data. Implementing an effective website personalization strategy has moved from nice-to-have to business-critical, requiring starting with data collection, implementing incrementally, measuring continuously, optimizing regularly, and choosing the right tools like Strapi v5 for its flexible content modeling that supports sophisticated personalization.

Strapi is a headless CMS that continues to be the go-to solution for businesses and developers looking to create scalable digital experiences. In 2025, Strapi has transformed the way organizations manage and deliver content across platforms, with flexibility and developer-friendly architecture being key factors in its success. Organizations such as Finary, Smartshore Ability, Tesco, AE Studio, and L'Équipe have leveraged Strapi's capabilities to solve unique challenges across industries, including scaling retail, building custom project management platforms, improving internal communication, and enhancing sports media content. Through automation of SEO page creation, streamlining content management, and empowering content creation, Strapi has driven efficiency and accelerated development for its clients, proving its value as a transformative CMS for modern content management.

htmx is a lightweight JavaScript library that presents a streamlined, server-driven approach to building dynamic web applications by extending HTML with intuitive attributes. Unlike traditional JavaScript frameworks like React, Vue, and Angular, which often require complex client-side logic and large bundle sizes, htmx focuses on minimizing code complexity and size, coming in at just 14kB minified and gzipped. By enabling servers to return HTML fragments instead of JSON, it aligns with the web's original hypermedia model, allowing developers to build interactive applications without heavy client-side frameworks. This approach reduces codebase size by up to 67% and eliminates the need for virtual DOM diffing and client-side state management, resulting in faster page loads and easier debugging. htmx's simplicity allows for incremental adoption in existing projects, supporting server-side rendering and integration with any backend that returns HTML, such as Django, Rails, or Node.js, while also offering real-time features through WebSockets and Server-Sent Events.

This article explores the integration of Vercel v0, an AI-powered tool for frontend development, with Strapi AI, a backend modeling and content management system. Vercel v0 enables developers to design and prototype frontend applications using natural language prompts, create entire web applications from scratch, refactor existing code, and connect to APIs and databases. The article highlights the capabilities of Vercel v0, including its ability to generate code snippets, create slides, enrich inputs with additional materials, and visualize concepts with animation. It also showcases Strapi AI's features, such as auto-saving schema changes, drag-and-drop field rearrangement, and AI-assisted iteration for developers. The integration of Vercel v0 with Strapi AI enables seamless structure and understanding to content modeling, making it easier for developers to build modern, dynamic, and scalable web applications with AI as a reliable co-pilot.

Astro is a web development framework that offers a refreshing approach to building content-rich websites, with features such as zero client-side JavaScript by default, an island architecture for partial hydration of interactive components, and content collections with type safety. Astro's flexible adapter system allows for deployment on various platforms, including serverless environments like Vercel and Cloudflare Workers. The framework also provides a friendly developer experience, with tools such as a CLI, VS Code extension, and first-class TypeScript support built-in. With its focus on performance, simplicity, and adaptability, Astro is gaining popularity among developers building content sites that require fast page loads and modern capabilities.

The Strapi Preview feature allows for direct previewing of frontend applications from within the Strapi admin panel. This makes content management more efficient and effective. The feature is a significant leap forward in content management capabilities, providing flexibility, customizability, and power. It can handle projects of varying complexities and works with any frontend framework that supports cookies and API endpoints. A multi-frontend preview setup allows rendering multiple types of previews simultaneously. Real-time updates can be achieved by implementing event listeners in the proxy component. The Strapi Preview Feature offers several key benefits, including scalability, customizability, and universal compatibility. The complete code for this tutorial can be found in a project repo or cloned from the LaunchPad repo.

Modern frontend development with React and Next.js aims to build fast, maintainable, accessible web apps in 2025. State management is crucial, but you may not need a library like Redux or Zustand if you manage states granularly using React's `useState` and `useContext`. Hybrid rendering combines different strategies for different purposes, such as Server-Side Rendering (SSR), Static Site Generation (SSG), Client-Side Rendering (CSR), and Incremental Static Regeneration (ISR). Performance optimization is key, with techniques like avoiding premature optimization, using Core Web Vitals, memoizing components, and implementing progressive enhancement. Code maintainability can be achieved through documentation, component structure, testing, and accessibility best practices. By following these modern best practices, developers can build fast, maintainable, accessible web apps that provide a great user experience.

A headless CMS separates content creation from presentation, delivering content to any platform via APIs, allowing for faster workflows, greater flexibility, and consistent user experiences across multiple channels. This architecture enables developers to build with their preferred frameworks while giving content creators full control over their materials. With a headless CMS, traditional monolithic structures are broken, enabling teams to work independently without being constrained by built-in templating or presentation logic. The result is improved collaboration between developers and content teams, faster execution, better alignment, and reduced time-to-market for new features and campaigns. Headless CMS platforms like Strapi v5 provide flexibility, performance, and extensibility required for modern digital experiences, making them a strong foundation for both current demands and future growth.

Strapi provides a powerful foundation for technical SEO, but the responsibility for implementing it shifts to developers. To do this effectively, consider using server-side rendering or pre-rendering to ensure crawlability and performance. Canonical URLs can help prevent duplicate indexing, while reducing API latency is essential for improving Largest Contentful Paint. Generating an XML sitemap and implementing hreflang tags for multilingual sites are also crucial. Additionally, preventing crawling of API and preview routes, standardizing slugs and URL structure across all content, and supercharging your SEO strategy with Strapi can help create a better digital experience that performs well in search engines. With Strapi's flexibility comes the need for deliberate planning to ensure complete control and optimization potential.

The guide emphasizes using Strapi, a headless CMS, to enhance technical SEO by ensuring content is crawlable, structured, and optimized for search engines. It details key strategies such as implementing server-side or pre-rendered HTML to improve crawlability, using canonical URLs to prevent duplicate indexing, and reducing API latency to enhance site performance metrics like Largest Contentful Paint. Additionally, it covers generating XML sitemaps, implementing hreflang tags for multilingual sites, and using JSON-LD structured data to improve search engine understanding and visibility. The guide also advises on managing API routes and preview pages to prevent unwanted crawling and stresses the importance of standardized URL structures for consistency and improved SEO performance. The flexibility of Strapi allows developers to tailor these strategies to their specific project needs, providing a robust foundation for effective SEO in a headless architecture.

Managing content across various platforms is increasingly impractical due to technical challenges. Omnichannel content management solves this problem by unifying content strategy across channels, relying on API-driven architecture that separates content from presentation, enabling a create-once, publish-everywhere workflow. This approach breaks down content silos and ensures seamless data flow between channels, delivering consistent user experiences. Key features of an effective omnichannel content management system include API-driven architecture, flexible content modeling, scalability, performance management, security considerations, and integration middleware. Strapi 5 is a headless CMS solution that offers key advantages for implementing omnichannel content management, including its API-first approach, enhanced APIs, role-based permissions, self-hosting, and plugin ecosystem. To implement an effective omnichannel strategy, it's essential to analyze current infrastructure, plan and design the system, integrate with frontend frameworks, database selection, and measure success through technical performance metrics, cross-channel consistency metrics, system reliability metrics, user engagement metrics, and A/B testing for optimization.

When working with Strapi, it's common to switch from one upload provider to another during different stages of the project. However, Strapi does not offer a dedicated tool for migrating uploads between providers, which can lead to issues if both files and metadata are not migrated together. To safely migrate media files from one provider to another, you need to backup your entire project, install and configure the new upload provider, import the backup into the updated Strapi project, and ensure that both the files and database records are migrated correctly. This involves updating the content security policy (CSP) to allow images from the new provider to display properly inside the Admin panel. The process requires careful planning and configuration of the new upload provider's settings, including AWS S3 permissions, credentials, and bucket information. By following this approach, you can cleanly switch between different upload providers without breaking your project.

Structured data is a way to label website content so search engines can interpret it accurately, enabling rich results and improved visibility in search engine results. It's essential for modern web development as it helps machines understand content like humans do, making content machine-readable, predictable, and interoperable. Google recommends using JSON-LD format, which separates content generation from the frontend, aligning well with Strapi's API-first approach. Implementing structured data in Strapi requires careful planning to create an organized, reusable content ecosystem, including setting up content types, creating structured data with JSON-LD, and integrating analytics tools. Properly implemented structured data can help search engines better understand and display content, enabling rich results, knowledge panels, and featured snippets, while also improving indexing accuracy, query matching, crawl efficiency, and contextual understanding.

Structured data, a critical component for enhancing web content visibility and functionality, transforms content into a machine-readable format, enabling search engines to interpret it more accurately and facilitate rich search results. This guide explains the importance of structured data for optimizing websites, API-driven applications, and headless CMS like Strapi, highlighting its role in improving search visibility through rich results and featured snippets. In Strapi v5, implementing structured data involves effective content modeling and strategic JSON-LD generation, which aligns with Strapi’s API-first architecture and supports flexible, scalable content systems. Schema.org provides a standardized vocabulary for structured data, with JSON-LD being Google's recommended format due to its ease of integration and maintenance. Proper implementation of structured data prepares content for future technologies such as AI and voice search, offering benefits like increased click-through rates and better query matching. Developers must understand both the technical formats and semantic vocabulary to effectively integrate structured data, ensuring search engines can offer enhanced listings, improve indexing accuracy, and connect related entities through knowledge graphs.

AI code editors are transforming modern software development by offering powerful features to boost productivity and improve code quality. These tools enhance developer workflows through smart suggestions, automation, and error catching, allowing developers to focus on solving complex problems rather than handling repetitive tasks. By leveraging AI capabilities, developers can save up to 55% of coding time, leading to faster development and quicker project launches. The right AI code editor should be aligned with your team's specific needs, workflow, and tech stack, considering factors such as privacy, security, and long-term fit. Tools like GitHub Copilot, JetBrains AI Assistant, Tabnine, Amazon CodeWhisperer, and Cursor offer unique strengths in areas like cloud-native development, enterprise-grade integration, and local operation options, making them suitable for various development contexts.

In this post, we will take a look at how customize Strapi dashboard by building a widget plugin for Strapi. Strapi Widgets are a way to add custom widgets to the Strapi admin panel. They are a great way to add customize Strapi dashboard for you clients. We will build our own dashboard The Strapi admin homepage is now fully customizable. With the new Widget API, developers can create dashboard components that display project stats, content overviews, links to workflows, custom metrics or visualizations, and more. It’s a new way to surface what matters most for each team. We will be building a widget that displays the number of content types in the Strapi application. This guide is based on Strapi v5 docs. You can find the original docs here. If you prefer to watch a video, you can check out the following video. I wanted to make a guide that is more hands on and practical. So I will walk you through the steps of building the widget. To simplify the process of setting up a Strapi plugin, we will use the Strapi Plugin CLI tool to help us accomplish this. We will start with the following command. npx @strapi/sdk-plugin@latest init my-first-widget. Make sure to run this command in the root of your Strapi application. This will create a new plugin in the src/plugins directory. We will create a frontend component and register it as a widget. First, let's quickly take a look at the plugin structure. We will just focus on the most important items where we will be working in. In the admin folder more closely we will see the following. index.ts - This is the entry point for our plugin. It is responsible for registering and configuring the plugin with the admin panel. components - This is the responsible for all of our frontend components. pages - This is the responsible for all frontend pages and routes. We will take a look at the server folder more closely later. But for now, let's register a new widget. We will start by creating a new component in the src/components folder named MetricsWidget.tsx. And and the following code. const MetricsWidget = () => { return ( <div> <h1> Hello World from my first widget</h1> </div> ); }; export default MetricsWidget; Now that we have a component, we need to register it as a widget. To do this, let's navigate to the admin/src/index.ts file and start by removing the following code. app.addMenuLink({ to: `plugins/${PLUGIN_ID}`, icon: PluginIcon, intlLabel: { id: `${PLUGIN_ID}.plugin.name`, defaultMessage: PLUGIN_ID }, Component: async () => { const { App } = await import("./pages/App"); return App; }, }); The above code is responsible for registering our plugin in the admin panel menu, not something we need for this use case. Next, let's register our widget component that we created earlier by adding the following code. app.widgets.register({ icon: Stethoscope, title: { id: `${PLUGIN_ID}.widget.metrics.title`, defaultMessage: "Content Metrics", }, component: async () => { const component = await import("./components/MetricsWidget"); return component.default; }, id: "content-metrics", pluginId: PLUGIN_ID, }); Make sure to import the Stethoscope icon from @strapi/icons-react. The completed file should look like this. import { PLUGIN_ID } from "./pluginId"; import { Initializer } from "./components/Initializer"; import { Stethoscope } from "@strapi/icons"; export default { register(app: any) { app.widgets.register({ icon: Stethoscope, title: { id: `${PLUGIN_ID}.widget.metrics.title`, defaultMessage: "Content Metrics", }, component: async () => { const component = await import("./components/MetricsWidget"); return component.default; }, id: "content-metrics", pluginId: PLUGIN_ID, }); app.registerPlugin({ id: PLUGIN_ID, initializer: Initializer, isReady: false, name: PLUGIN_ID, }); } async registerTrads({ locales }: { locales: string[] }) { return Promise.all(locales.map(async (locale) => { try { const { default: data } = await import(`./translations/${locale}.json`); return { data, locale }; } catch { return { data: {}, locale }; } }); } }; Now to test that everything is working, first in your terminal navigate to the src/plugins/my-first-widget directory and run the following command. npm run build npm run watch This will build the plugin and start the plugin in watch mode with hot reloading. Now in another terminal navigate to the root of your Strapi application and run the following command. npm run dev This will start the Strapi application. You should be able to find your plugin in the admin panel in the left sidebar. Nice, now we have a plugin that is working. Let's create a new widget. First, let's quickly take a look at the plugin structure. We will just focus on the most important items where we will be working in. In the server folder more closely we will see the following. src - This is the responsible for all of our backend code. config - This is the responsible for all of our configuration files. content-types - This is the responsible for all of our content types. controllers - This is the responsible for all of our custom controller logic. middlewares - This is the responsible for all of our middleware functions. policies - This is the responsible for all of our policy definitions. routes - This is the responsible for all of our API routes. services - This is the responsible for all of our service classes. bootstrap.ts - This is the entry point for our plugin's bootstrap code. destroy.ts - This is the entry point for our plugin's destruction code. index.js - This is the entry point for our plugin's main code. register.ts - This is the entry point for our plugin's registration code. We will be working in the src/controllers and src/routes folders. You can learn more about Strapi backend customizations here. Let's start by creating a new controller. You can learn more about Strapi controllers here. Let's navigate to the src/controllers and make the following changes in the controller.ts file. import type { Core } from "@strapi/strapi"; const controller = ({ strapi }: { strapi: Core.Strapi }) => ({ async getContentCounts(ctx) { try { // TODO: Add custom logic here ctx.body = "Hello from the server"; } catch (err) { ctx.throw(500, err); } }); export default controller; Now that we have our basic controller, let's update the routes to be able to fetch data from our controller in the "Content API" and "Admin API". Content API - This is the API that is used to fetch data from the public website. Admin API - This is the API that is used to fetch data from the admin panel. This is the API that is used to fetch data from the admin panel. Let's navigate to the src/routes folder and make the following changes. In the content-api.ts file, let's make the following changes. const routes = [ { method: "GET", path: "/count", handler: "controller.getContentCounts", config: { policies: [] } }, ]; This will create a new route that will be able to fetch data from our controller that we can use to fetch data from an external frontend application. Let's try it out. First, in the Admin Panel navigate to the Settings - Users & Permissions plugin - Roles - Public role. You should now see our newly created custom route ( getCustomCounts ) from our plugin that powers our widget. We can test it out in Postman by making a GET request to the following URL: http://localhost:1337/api/my-first-widget/count We should see the following response: { "message": "Hello from the server" } Now that we have a working Content API route, let's see how we can do the same by creating a Admin API route that will be internal route used by our Strapi Admin Panel. Let's navigate to the src/routes folder and make the following changes. First let’s create a new file named admin-api.ts and add the following code. const routes = [ { method: "GET", path: "/count", handler: "controller.getContentCounts", config: { policies: [] } }, ]; Now, let's update the index.js file to include our new route. import adminAPIRoutes from "./admin-api"; import contentAPIRoutes from "./content-api"; const routes = { admin: { type: "admin", routes: adminAPIRoutes }, "content-api": { type: "content-api", routes: contentAPIRoutes }, }; export default routes; Step 5: Update Frontend Component to fetch our test data. And finally, let's update our component in the src/components/MetricsWidget.tsx file to fetch data from our new route. To accomplish this, we will use the useFetchClient provided by Strapi. Let’s update the MetricsWidget.tsx file with the following code. import { useState, useEffect } from 'react'; import { useFetchClient } from '@strapi/strapi/admin'; import { Widget } from '@strapi/admin/strapi-admin'; import { Table, Tbody, Tr, Td, Typography } from "@strapi/design-system"; import { PLUGIN_ID } from '../pluginId'; const PATH = '/count'; const MetricsWidget = () => { const { get } = useFetchClient(); const [loading, setLoading] = useState(true); const [metrics, setMetrics] = useState({}); const [error, setError] = useState(null); useEffect(() => { const fetchMetrics = async () => { try { const { data } = await get(PLUGIN_ID + PATH); console.log('data:', data); const formattedData: Record<string, string | number> = {}; if (data &amp; typeof data === 'object') { await Promise.all(Object.entries(data).map(async ([key, value] =&gt; { if (typeof value === 'function') { const result = await value(); formattedData[key] = typeof result === 'number' ? result : String(result); } else { formattedData[key] = typeof value === 'number' ? value : String(value); } }))); setMetrics(formattedData); setLoading(false); } catch (err) { console.error(err); setError(err instanceof Error ? err.message : 'An error occurred'); setLoading(false); } }; fetchMetrics(); if (loading) { return &lt;Widget.Loading /&gt;; } if (error) { return &lt;Widget.Error /&gt;; } if (!metrics || Object.keys(metrics).length === 0) { return &lt;Widget.NoData&gt;No content types found&lt;/Widget.NoData&gt;; } return (&lt;Table&gt;&lt;Tbody&gt;{Object.entries(metrics).map(([contentType, count], index =&gt; (&lt;Tr key={index}&gt;&lt;Td&gt;&lt;Typography variant="omega"&gt;{String(contentType)}&lt;/Typography&gt;&lt;/Td&gt;&lt;/Tr&gt;)&lt;/Tbody&gt;&lt;/Table&gt;);}); }; export default MetricsWidget; Now, if you navigate to the Admin Panel you should see the final result. Yay, we have a cool new widget that displays the number of content types in our project. Now, you can start building your own widgets and share them with the community. Building a custom widget for Strapi may seem complex at first, but once you go through it step by step, it’s actually pretty straightforward. You now have a working widget that shows content counts right inside the Strapi admin panel—and it looks great thanks to the built-in Design System. Widgets like this can be a powerful way to add helpful tools for your team or clients.

A headless CMS like Strapi offers flexibility in building responsive, device-agnostic LMS platforms by separating content management from presentation. This allows for accessible, consistent learning experiences across channels, including websites, mobile apps, VR platforms, and offline environments. By choosing a headless CMS with features such as content modeling flexibility, authentication capabilities, API support, extensibility, and hosting options, developers can build an LMS that works across any device and adapts to modern learning needs. With Strapi's API-first approach, users can create content once and deliver it anywhere, supporting cross-platform content delivery, reliable performance at scale, efficient content reuse, custom content structures, built-in API flexibility, personalized learning experiences, and more. By following the step-by-step guide on how to build an LMS with a headless CMS like Strapi, developers can create flexible, scalable, and secure learning platforms that support modern educational technologies.

A software framework is a pre-built set of tools and libraries designed to help developers create applications faster and more efficiently. Frameworks provide a structured approach to common problems such as routing, state management, authentication, database integration, error handling, and more. They bring consistency to code organization, reduce bugs, and make it easier for teams to collaborate and scale. By relying on established patterns and tools, developers can avoid unnecessary complexity and technical debt, focusing on what makes their app unique. Frameworks turn shared problems into solved problems, allowing energy to be directed toward the product's core features rather than its underlying plumbing. They are one part of a larger ecosystem of development tools and come in various types, including web frameworks, application frameworks, enterprise frameworks, mobile frameworks, data science frameworks, and content management frameworks. Each type is designed to solve specific sets of problems, but they all offer common advantages such as faster development, reduced code duplication, improved scalability, better security, and easier maintenance. When choosing a framework, it's essential to prioritize performance, scalability, and flexibility while considering the ecosystem support, long-term stability, and licensing fit. To get the most from your framework, follow best practices such as understanding its architecture, following conventions, keeping it updated, leveraging built-in security features, writing comprehensive tests, optimizing performance, planning for maintenance and future development, and considering scalability from the start. By selecting the right software framework, developers can accelerate modern app development while enhancing quality, speed, and consistency.

React Suspense is a feature of React that simplifies loading state management by declaratively showing fallback content while components load. It works exceptionally well with data fetching patterns, revolutionizing how we handle asynchronous operations in React apps. By using Suspense, you can declaratively handle loading states, ensuring a smoother user experience by displaying fallback content until the actual content is available. This mechanism improves app performance, making React apps more efficient and user-friendly. Additionally, Suspense makes it easy to implement lazy loading components, which split code into smaller chunks that load when needed. This approach enhances initial load time performance and reduces waiting times for users. When designing fallback UIs, match the structure of real content to avoid layout shifts, add subtle animations to indicate loading, and keep fallbacks accessible for screen readers with proper aria attributes. To get the most out of Suspense, consider creating smaller boundaries around logical UI sections, using separate Suspense boundaries for components that should load in parallel, and monitoring third-party library updates. By implementing these patterns, you can transform your user experience from functional to delightful and elevate your app's performance with React Suspense.

The guide provides a comprehensive tutorial on building a newsletter subscription system using Strapi, Brevo, and Next.js. The system includes features such as managing subscribers, creating and dispatching newsletters, developing a frontend subscription form, and implementing backend validation and security measures like API token authentication. The guide covers the setup of each tool, including Strapi's configuration for email sending, Brevo's integration with Strapi, and Next.js's role in handling the frontend subscription form. It also discusses how to add design elements using Tailwind CSS and remove unused code. The tutorial concludes by providing a complete code repository and emphasizing the importance of this system for engaging with audiences and offering a scalable and secure solution for newsletter needs.

Strapi 5 introduces a powerful preview feature that allows content editors to view draft content directly on the frontend before publishing. This is perfect for editorial workflows where content needs review or approval before going live, helping catch layout or formatting issues early. To set up the preview feature in Strapi and Next.js, you need to configure the Strapi backend with a preview configuration and create a secure preview route in your Next.js app using `app/api/preview/route.ts`. The preview handler securely accesses the preview request parameters from the URL, enables or disables Next.js Draft Mode based on the status value, and redirects users to the correct preview path. Additionally, you need to update the article page to support previewing draft vs published content and pass the correct status parameter to the `getArticleBySlug` function. With just a few configuration changes, you can unlock a powerful preview experience for your content team using Strapi and Next.js.

Next.js provides features that enhance SEO without sacrificing website performance or customizability, addressing challenges such as creating fast, crawlable content for search engines and users. It offers server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR) capabilities to improve crawlability and indexing while boosting page performance. The framework also includes built-in performance optimization features, dynamic metadata generation using the `<next/head>` component, semantic HTML tags for improved structure and accessibility, Open Graph tags for social media sharing, image optimization with lazy loading and responsive sizing, canonical URLs for preventing duplicate content issues, structured data implementation through JSON-LD, and a dynamic sitemap generation feature. To implement these features effectively, developers must avoid common mistakes such as misusing rendering methods, neglecting metadata implementation, and ignoring mobile responsiveness. Integrating Next.js with a headless CMS like Strapi v5 creates a flexible content management ecosystem that supports SEO-friendly practices, offering centralized control over metadata, streamlined workflows, and the flexibility to adapt to changing requirements. By leveraging these features and strategies, developers can create highly optimized web applications that satisfy both search engines and users.

The hybrid CMS vs headless CMS debate revolves around a tradeoff between developer flexibility and ease of use for non-technical content creators. Hybrid CMS platforms combine traditional features with API capabilities, supporting omnichannel delivery while remaining accessible to non-technical users. In contrast, a headless CMS provides a clean separation of content and presentation, giving developers full control over the front end. The choice between a hybrid CMS and a headless CMS depends on project complexity, team skillset, and long-term content strategy. Hybrid CMSs are ideal for teams transitioning from legacy systems or requiring omnichannel delivery with user-friendly editing tools, while headless CMSs offer full flexibility and performance for developer-led teams building custom digital experiences across multiple platforms. Strapi v5 is a fully headless, open-source solution that delivers API-first architecture, intuitive admin panels, and deep customization, making it an attractive choice for teams seeking the best of modern performance and usability.

Modern software lives in ecosystems that are continuously evolving. As businesses scale, requirements shift, and user expectations evolve, developers need tools that don't just work out of the box but grow with the product. Extensibility becomes essential to accommodate these changes. Developers should have access to systems that can shape to fit their unique workflows and project goals, whether through customization, APIs, or integrating external services. Extensibility is at the heart of developer empowerment and central to Strapi's mission: providing a flexible, open-source foundation for building content-driven applications that scale with your needs.

Developers face significant challenges in achieving productivity, losing 5-15 hours weekly due to tool overload, inefficient workflows, and constant context-switching. To regain time, reduce stress, and enjoy work more, developers can adopt actionable strategies such as selecting high-quality development tools, embracing automation, refactoring often but not excessively, adopting code snippets and libraries, implementing focus sessions, avoiding multitasking, improving typing and command proficiency, optimizing team dynamics, incorporating peer feedback, and prioritizing physical and mental health. By implementing these strategies, developers can balance speed, quality, and impact while minimizing wasted time on inefficient processes, ultimately enhancing their productivity and overall development experience.

Svelte and React are two popular JavaScript frameworks used for building modern web applications. Svelte offers leaner bundles and faster performance out of the box, making it well-suited for mobile and performance-critical projects. On the other hand, React provides a mature ecosystem with wide adoption, which makes it ideal for large teams and complex enterprise applications. Both frameworks support component-based UI development, but they adopt different approaches to how your app is compiled, delivered, and maintained. Svelte's compiler-first approach offers measurable advantages in terms of bundle size, initial load time, DOM update efficiency, memory usage, and CPU utilization. React remains effective in specific cases, particularly for complex applications where its virtual DOM helps manage large-scale UI updates. However, Svelte's simplicity and runtime efficiency make it a better choice for projects targeting low-powered devices or needing lightning-fast updates. The choice between Svelte and React depends on project scale and complexity, team size and experience, performance requirements, development speed, ecosystem dependencies, long-term maintenance, hiring considerations, and backend integration needs. For example, startups need rapid development with limited resources may benefit from Svelte's minimal boilerplate and intuitive syntax, while enterprise applications require a larger hiring pool for React developers. Ultimately, the most future-proof choice is choosing the tool that aligns with your project's specific needs, technical requirements, and team capabilities, especially when paired with adaptable backend technologies like Strapi v5 and Strapi Cloud.

A choice between code-first and database-first data access strategies depends on project context. Code-first is suitable for new projects where the data model evolves with the application, aligning well with agile workflows and domain-driven design. It provides full developer control, simplified workflow, and faster iteration. However, it may require a learning curve and can be less flexible than database-first approaches. Database-first is ideal for legacy databases or complex schemas, offering seamless integration, automatic code generation, and support for proven designs. Despite its advantages, it can have limitations such as reduced flexibility and potential mapping issues. When evaluating which approach to use, consider project type, team skills, database complexity, future maintenance needs, business and regulatory requirements, and the role of a headless CMS like Strapi in complementing or replacing traditional approaches. Understanding both code-first and database-first strategies enables developers to choose the right tool for their job and adapt to changing project requirements.