Table of Contents

1. Introduction

• Website Architecture
• Benefits of a Well-defined Web Architecture

2. Architecture

• Next.js
• Introduction to Next.js
• Benefits of Using Next.js
• Tailwind CSS
• Introduction to Tailwind CSS
• Benefits of Using Tailwind CSS for Styling rapid
• Strapi
• Introduction to Strapi as a headless CMS
• Advantages of using a headless CMS
• Integrating Strapi with Next.js frontend
• Vercel
• Introduction to Vercel as a deployment platform
• Advantages of deploying Next.js applications on Vercel
• Deployment process on Vercel
• Using webhooks for automated deployments
• Hetzner
• Introduction to Hetzner as a Cloud Hosting Provider
• Choosing Hetzner for Strapi and Database Hosting

3. Conclusion

1. INTRODUCTION

1.1 Website Architecture

In the world of web development, the term "architecture" can be interpreted in two ways, encompassing two distinct but interconnected aspects, both of which are crucial to the success of a website:

• Information Architecture (IA): This focuses on the user side of the site, similar to the floor plan of a house. It delves into how information is organized, categorized, and presented. Just as a well-designed house ensures a logical flow between rooms, a solid IA ensures that users can effortlessly navigate and find the information they are looking for. Navigation menus, breadcrumbs, and website hierarchy all fall under the umbrella of AI.

• Technical Architecture: This delves into the technical foundation of the site, representing the invisible plumbing and wiring that make the house work. Here we explore the technologies that power the site, including programming languages, frameworks, databases, and delivery platforms. Understanding the technical architecture helps you optimize site performance, ensure scalability, and create a secure and reliable online experience.

Although these two aspects of website architecture may seem distinct, they work together. A well-defined IA informs the technical architecture by outlining the functionality and content needs of the site. In contrast, the technical architecture determines what information structures and functionality can realistically be implemented. By considering both sides of the coin, it is possible to create websites that are not only user-friendly, but also technically sound and designed for long-term success.

1.2 Benefits of a Well-defined Web Architecture

This article will focus primarily on the technical architecture, uncovering the various technologies that make up our website, analyzing how these elements work together to create a performant, scalable and secure online experience.

A structured architecture allows for code modularity and reusability. This reduces redundancy, minimizes file sizes and allows for the implementation of efficient caching mechanisms. The result is faster page loading, a critical factor for both user engagement and SEO positioning.

A well-defined architecture separates the presentation layer (front-end) from the business logic layer (back-end) and data storage (database). This separation of concerns allows for independent development, testing and deployment of each layer. In practice, different teams can work on the user interface without affecting back-end functionality, speeding up development cycles and reducing the risk of errors.

A well-designed architecture anticipates future growth by using technologies and frameworks that can scale horizontally (by adding more servers) or vertically (by increasing server resources) to handle increased traffic and data requests. Additionally, a clear separation of concerns simplifies maintenance by allowing developers to pinpoint issues in specific layers without having to dig into the entire code base.

By facilitating integration with external Application Programming Interfaces (APIs), a well-defined architecture enables you to leverage third-party services for features like payment processing, social media integration, or real-time data feeds. This not only improves site functionality, but also promotes modularity and reduces development time.

Finally, a solid architecture can prioritize security best practices from the ground up. This includes secure coding practices, user authentication and authorization mechanisms, and data encryption both at rest and in transit. By building security into the foundation, you create a more robust website that is less vulnerable to attacks.

These technical benefits underscore the importance of a well-defined website architecture that goes beyond just the user experience. It lays the foundation for a website that is not only performant and scalable, but also secure, maintainable, and future-proof. By investing in a solid technical foundation, you create a website that can evolve and thrive in a dynamic online environment.

2. Our Business Website Architecture

2.1 Next.js

Introduction to Next.js

Next.js has taken the React scene by storm as a cutting-edge framework for building modern web applications. It is based on React, but enriches it with additional features that simplify the development of performant and SEO-friendly websites and web applications.

Next.js Benefits

Here are some of the key points that make Next.js an attractive choice for today's web developers:

• Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js allows you to render React components on the server-side, resulting in faster initial loads and better SEO performance. It also supports static site generation, where pages can be pre-built at build time, further improving performance and reducing server load.

• Automatic Code Splitting: Next.js automatically splits your code into smaller chunks, allowing you to load only the code you need initially. This improves load times by reducing the size of the initial bundle and only loading additional code when needed, resulting in a better user experience.

• Routing: Next.js comes with a built-in routing system that allows you to easily create dynamic routes. You can define routes using the file system, making it intuitive and simple to organize the structure of your application.

• API Routes: Next.js provides an easy way to create API endpoints within your application. You can define serverless API routes using the pages/api directory, allowing you to fetch data and run server-side logic seamlessly.

• CSS-in-JS Support: Next.js natively supports CSS-in-JS solutions like styled-components and Emotion. This allows you to encapsulate styles with your components, making them more maintainable and reusable.

• Image Optimization: Next.js automatically optimizes images, reducing their size without compromising quality. It supports lazy loading and responsive loading of images, improving performance and user experience.

• TypeScript Support: Next.js offers great support for TypeScript, allowing you to write type-safe code and catch errors at development time. This leads to more robust and maintainable codebases.

• Authentication and Authorization: Next.js provides built-in support for authentication and authorization through libraries like NextAuth.js and Auth0. This makes it easy to implement user authentication and secure application routes.

• Internationalization (i18n): Next.js provides built-in support for internationalization, allowing you to build multilingual websites with ease. It provides tools to manage translations and location-specific content, making it easy to reach a global audience.

• Analytics and Performance Monitoring: Next.js integrates seamlessly with popular analytics and performance monitoring tools like Google Analytics and Vercel Analytics. This allows you to track user behavior, monitor metrics

• performance and optimize your application accordingly.

2.2 Tailwind CSS

Introduction to Tailwind CSS

Tailwind CSS is a low-level CSS framework that provides utility classes for creating responsive user interfaces, allowing for complete design customization.

Benefits of Tailwind CSS:

• Rapid Development: Eliminates the need to write custom CSS, speeding up the styling process.
• Ease of Use: Intuitive and descriptive classes.
• Flexibility and Customization: Combinable utility classes to create unique designs.
• Responsive by Definition: Built-in responsive variants.
• Design Consistency: Promotes a consistent aesthetic.
• Lower CSS Maintainability: More concise and easier to maintain CSS code.

Example of using TailwindCSS: javascript <SectionWrapper className="h-40px bg-[white] !py-[4rem] !z-[20] mt-[5rem] rounded-t-[3rem]"> <div className="flex items-center justify-items-center"> <Button type="link" data={backButton} className="text-[#94A3B8] flex-row-re verse text-[1rem] leading-[1rem] weight-[500]" /> </div> </SectionWrapper>

2.3 Strapi as a Headless CMS

Introduction to Strapi Strapi is an open source headless CMS based on Node.js that offers an intuitive user interface and a flexible RESTful API.

Benefits of Strapi

• Decoupling of Frontend and Backend: Greater flexibility and scalability.
• RESTful API: Facilitates integration with various frontends.
• Agile Development: Promotes agile workflows.
• Next.js Integration

Integrate Strapi with Nextjs

Strapi easily integrates with Next.js, providing a powerful solution for managing content and creating optimized user experiences.

Integrating Strapi with Next.js allows you to build dynamic and performant front-end web applications by leveraging the strengths of both frameworks. Here is a simplified overview of the integration process:

1. Set up Strapi:

• Install and launch Strapi: Start by installing and launching a Strapi instance. This will provide you with a web interface to manage your content and APIs.
• Create content types: Define content types that represent your application data, such as articles, products, or user profiles.
• Add data: Populate your content types with data using the Strapi web interface or by importing it from external sources.

2. Consume the Strapi API from Next.js:

• Create Next.js pages: Create pages in your Next.js application that will display the data retrieved from Strapi.
• Make API requests: Use installed libraries to make API requests to the API routes exposed by Strapi.
• Fetch data: Process API responses to extract the data needed to populate your Next.js pages.

3. Manage authentication:

• Implement authentication in Strapi: Configure authentication in Strapi to manage access to users and data.
• Send authentication tokens to Next.js: When a user authenticates in Strapi, they send an authentication token to Next.js.
• Include tokens in API requests: Include authentication tokens in API requests to Strapi from Next.js to authorize access to protected data.

2.4 Vercel as a Deployment Platform

Introduction to Vercel

Vercel is a serverless deployment platform optimized for JavaScript-based applications and frameworks like Next.js.

Benefits of Vercel

• Easy and Fast Deployment: Deploy directly from Git repositories.
• High Performance and Automated Scaling: Managed infrastructure and automatic scaling.
• Global CDN and SEO Optimized: Fast load times and search engine visibility.
• Built-in Security: Free SSL certificates and DDoS protection.
• Seamless Collaboration: Automated teams and deployments.

Deployment Process

1. Create a Vercel account.
2. Connect to your Git repository.
3. Select your deployment setting.
4. Start the deployment.
5. Monitor the status of your deployment.

Webhooks

Webhooks are URL endpoints that allow different applications to communicate with each other in an automated way. When a specific event happens in an application, it sends an HTTP POST request to the webhook, notifying the receiving server. Webhooks are used to automate processes, send notifications, and integrate services.

Using Vercel Webhooks with Strapi:

1. Configuring Vercel Webhook

• Log in to your Vercel account and select the project you want to configure the webhook for.
• Go to the Settings tab of the project.
• In the Git section, find the option to configure webhooks.
• Select the branch and then click Add to create a new webhook.
• In the STRAPI UI go to the Settings section.
• Select Webhooks.
• Click Create new webhook.
• Enter a name for the webhook.
• Enter the webhook URL created on Vercel.
• Select the events to monitor, such as entry.create, entry.update, entry.delete for content created, updated, or deleted.
• Save the webhook. Webhook setup to deploy Vercel at the end of the Strapi deployment

{
/**
* An asynchronous bootstrap function that runs before
* your application gets started.
*
* This gives you an opportunity to set up your data model,
* run jobs, or perform some special logic.
*/
bootstrap(/*{ strapi }*/) {
if(process.env.GENERIC_ENV!=="local"){ //executes redeploy on Vercel after 30 seconds, starting from when Strapi starts up
setTimeout(()=>{
fetch(`${process.env.VERCEL_DEPLOY_HOOK}`,{
method: "POST"
})
console.log("Called deploy hook");
;
}, 30000);
}
},
}

2.5 Hetzner as a Cloud Hosting Provider

Introduction to Hetzner

Hetzner is a reliable and high-performance cloud hosting provider, known for its competitive pricing.

Hetzner Advantages

• High Reliability and Uptime: Robust and redundant data centers.
• High Performance and Scalability: Flexible server options.
• Integrated Security: Firewall, VPN and encryption.
• Flexibility and Control: High level of control over servers.
• Competitive Costs: Competitively priced hosting solutions.

We have chosen to host both the PostgreSQL and Strapi databases on a hetzner machine, thus reducing the build time to an average of 8 minutes.

3. Conclusion

The architecture of our site, described in this article, represents a concrete example of how modern technologies and well-defined approaches can create a solid and scalable digital platform. The synergy between Next.js, Tailwind CSS, Strapi, Vercel and Hetzner offers a series of tangible benefits:

• High performance:

Fast loading times and a smooth user experience, even with increasing traffic, thanks to Next.js' server-side rendering, Vercel's static site generation and scalable infrastructure.

• Scalability:

An architecture designed to grow with your business needs, being able to scale horizontally or vertically to handle a growing number of users and requests.

• Maintainability:

Simple maintenance and updating of your website, reducing development time and associated costs, thanks to the separation of concerns and the use of modern technologies such as Tailwind CSS and Strapi.

• Security:

A secure and reliable online environment guaranteed by implementing security practices from the early stages, using reliable providers such as Hetzner and integrating security features into Vercel and Strapi.

• Optimized User Experience:

An intuitive user interface and responsive design that create an engaging and enjoyable user experience for all visitors on any device.

• A Model to Follow:

The site architecture serves as a model to follow for companies looking to create a robust, scalable and secure digital presence that supports their long-term business goals.

• Iterative Approach and Continuous Optimization:

In addition to the key points discussed above, it is essential to emphasize the importance of an iterative approach to website development.

Adopting an agile approach and using analytics and monitoring tools allow for continuous optimization of the website, ensuring that it remains cutting edge and able to meet the demands of an ever-changing digital landscape.