Modern Front-end Web Architecture Using React.Js and Next.Js

يستخدم لتطوير برمجيات الويب اليوم مجموعة متنوعة من أطر الويب والمكتبات. غالبًا ما يعمل مطورو برمجيات الويب على جانبي التطبيق. نظرًا لأن الواجهة الخلفية والواجهة الأمامية عنصران مستقلان، يمكن أن يركز تطوير برمجيات الويب الأمامي فقط على الأشياء المتعلقة بالواجهة الأمامية، مثل العرض والتحريك على واجهة المستخدم دون النظر إلى الواجهة الخلفية. من التقنيات الشائعة الاستخدام للواجهات الأمامية للويب مكتبة React.js وإطار عمل Next.js اللذين ثم استخدامهم كتقنية لبناء تطبيقات الواجهة الأمامية لموقع جامعة الزاوية (UZ) وتطبيقات لوحة التحكم. الغرض من هذه الدراسة هو مناقشة مزايا وعيوب مكتبة React.js وإطار عمل Next.js كأحد التقنيات المستخدمة لتطوير تطبيقات الويب لجامعة الزاوية UZ. توضح نتائج هذه الدراسة الخطوات التي يتخذها المطور عند إنشاء الواجهة الأمامية لتطبيق UZ الخاص به. بالإضافة إلى ذلك، تعرض هذه الدراسة مزايا وعيوب React.js وNext.js باعتبارها التقنيات الأساسية لبناء واجهات المستخدم لتطبيقات UZ.The Today, web development uses a variety of web frameworks and libraries. Web developers often work on both sides of an application. Since the backend and frontend are two independent elements, frontend web development can focus only on things related to the frontend, such as Display and animate on the UI without considering the backend. A commonly used technology for web front ends is the React.js library and Next.js framework which used as the technology for building front-end applications for University Of Zawiya (UZ)'s website and control panel applications. The purpose of this study is to discuss the advantages and disadvantages of React.js library and Next.js framework as one of the technologies used to develop UZ web applications. The results of this study outline the steps a developer takes when building his UZ application front end. Additionally, this study presents the advantages and disadvantages of React.js and Next.js as the primary technologies for building user interfaces for UZ applications

Comparison of full-stack capabilities of modern React frameworks

The objective of the thesis was to compare the full-stack capabilities of modern React frameworks. The commissioner of the thesis was the software consulting company Futurice Ltd. The purpose of the thesis was to help the client advice their client on the differences of full-stack React frameworks. The comparison focused on the differences between three React frameworks: Next.js, React Router, and TanStack Start. The comparison subjects were based on their popularity, wide install base, and novelty. The overviews for the frameworks were separated by three major categories of features the frameworks provide which were routing, data fetching, and state management. The outcome of the thesis was feature comparison tables of the frameworks from which developers can compare the features and their relationships with each other. The conclusion of the thesis was that React frameworks are very similar with subtle differences. Moreover, it was concluded that for new web application projects the features the frameworks bring are not overly significant. However, for existing project the differences can cause problems, which is why it is important for the developers to study each framework in more detail to understand which framework to select, depending on the requirements the web application projects themselves set. In the end, further study could be done on the topics left outside of the thesis which were performance, accessibility, and different runtime support

Performance optimization of web applications using Qwik

This article analyzes the performance of three frameworks - React.js, Next.js and Qwik - that offer different methods of rendering application views. The purpose of the study was to show whether the new Qwik framework allows for better application load times compared to the other frameworks. The study was conducted using 3 applications representing the same research content, referring to cases occurring in production environments. In order to assess the performance, the Google Lighthouse tool was used, thanks to which it was proved that it is impossible to unequivocally say that Qwik allows for better optimization of the application compared to other frameworks

Typical Patterns of Interaction between a React Frontend and a WordPress Backend

This article reviews current practices of using React frontend with WordPress backend in a headless setup and typifies main data-transfer patterns, rendering strategies, and auth/reactivity mechanisms. Massive growth in the headless-CMS market, a leading position for WordPress, and the widespread use of React justifies this study’s relevance. The novelty of this work lies in building a three-dimensional model that integrates the data channel (REST vs GraphQL vs RPC) with rendering strategy (CSR, SSR, SSG/ISR) and authorization/update approach (Cookie + Nonce, JWT, Webhooks/Subscriptions), allowing the typical interaction patterns — over ten of them — to be classified and assessed. The significant findings indicate that REST-SPA has a minimal entry threshold due to the built-in WP-REST API but needs more caching to completely get rid of the “N+1” problem and reduce network latency; GraphQL-SPA solves aggregated request problems and also has strict typing but it adds much complexity to schema and access-control design; Next.js Solutions with SSR/ISR have both Static Generation and Incremental Updates via Webhooks or GraphQL Subscriptions. They are high performing, SEO friendly, and offer content consistency; in private scenarios, JWT authorization or request proxying is used; for headless e-commerce, CoCart is chosen; microservice REST-RPC endpoints extend platform capabilities without forking the core. This article will be helpful for architects, developers, and technical leaders choosing an optimal headless infrastructure based on React and WordPress

Designing MooC Course from Next.js Framework

The goal of the thesis was to report an internship where an online course on the Next.js framework was designed and created for the Moodle learning environment of Metropolia University of Applied Sciences. The purpose of the course is to provide students with the opportunity to independently learn the fundamentals of modern web development using Next.js, and the necessary related tools. During this work, I also familiarized myself with other JavaScript frameworks by completing an existing online course on Angular and using that as a structural basis for my own implementation. In the theoretical part of the thesis, JavaScript frameworks are introduced with a focus on React, Angular and Vue. The focus is on the Next.js framework: its features, use cases, and development. The thesis also introduces learning management systems and focuses on the Moodle platform, and the technical possibilities it provides for implementing online courses. The theory is based on literature, documentation, and practical experience. As a result of the thesis, the content for the first three modules of a Next.js course was planned for Moodle. Although the course was not completed in full the implemented structure and content form a solid foundation for future development. The course can be expanded with new modules and refined further based on feedback and evolving needs

Web based IoT monitoring system for ultrasonic water flow measurement using ESP32-S3 and cloud database

Efficient water management is crucial for ensuring sustainable resource utilization and reducing water losses in both industrial and domestic applications. This study presents the design and implementation of a smart water monitoring system based on an ultrasonic flow meter, which enables accurate, real-time measurement of water flow without physical contact with the medium. The proposed system integrates ultrasonic sensors with a microcontroller-based data acquisition unit and wireless communication to transmit flow rate, volume, and consumption data to a cloud-based monitoring platform. The system was tested in various flow conditions to evaluate accuracy, stability, and energy efficiency. Experimental results demonstrate that the ultrasonic flow meter achieved a measurement accuracy of ±1% compared to a reference turbine flow meter, while maintaining minimal power consumption. Furthermore, the integration of Internet of Things (IoT) capabilities allows remote monitoring, anomaly detection, and data logging for long-term analysis. The results indicate that this ultrasonic-based monitoring system provides a reliable and non-invasive solution for smart water management, offering potential applications in household metering, agricultural irrigation, and industrial fluid monitoring

Comparative Analysis of Server-Side Rendering : React vs. Next.js

Modern web application development demands solutions that are not only feature-rich but also performant, responsive, and discoverable by search engines. Consistently delivering applications that meet these criteria presents a significant challenge, given the wide variation in user devices, network conditions, and browser capabilities. The evolution and innovation aimed at delivering exceptional user experiences have been continuous; the same can be stated for the methodologies employed to develop these solutions. One technique experiencing a resurgence, albeit in a modified format, is server-side rendering (SSR), specifically streaming SSR. While numerous opinionated frameworks exist to implement this feature, the objective of this thesis is to explore the benefits of streaming server-side rendering by comparing two approaches: developing a solution from scratch using the Bun runtime versus utilizing the established Next.js framework. This comparison will involve measuring performance metrics and evaluating the overall development experience. The results aim to demonstrate the advantages and potential pitfalls of developing a streaming server-side rendering solution without the constraints and conveniences of an opinionated framework

Stockview: a data visualization web application for stock visualization and comparison

This thesis focused on the development of StockView, a simple and user friendly web application for tracking and comparing stock data. The platform allows users to search for stock symbols, add them to a watchlist, and visualize their performance through interactive and easy to understand charts. Real time stock data was fetched using the Alpha Vantage API to support informed investment decisions. The application was built using React, Next.js, and Observable Plot. The development process included project setup, API integration, and the creation of core components such as data fetching, watchlist management, and displaying comparative stock charts for data handling and visualization. The app was designed to be responsive and accessible, providing users with a simple and effective tool for making informed decisions

Pengembangan Aplikasi Web Pelayanan Administrasi Surat Menyurat Desa Menggunakan Freamwork Next.Js Dan Nestjs: Studi Kasus : Desa Sakerta Barat

Penelitian ini bertujuan untuk merancang dan mengembangkan aplikasi berbasis web menggunakan framework Next.js dan NestJS guna mengotomatisasi serta mempermudah pelayanan administrasi surat menyurat desa. Metodologi penelitian meliputi identifikasi masalah, pengumpulan data melalui wawancara dan observasi, serta pembangunan perangkat lunak menggunakan metode Agile development, yang mencakup tahapan requirement, design, development, testing, deployment, dan review. Hasil penelitian menghasilkan rancangan aplikasi web yang menyediakan fitur pengajuan permohonan daring, pelacakan status permohonan, dan pembuatan surat keterangan digital, yang bertujuan untuk menyederhanakan proses administrasi desa, mempersingkat waktu pemrosesan dokumen, serta meningkatkan akurasi dalam pengelolaan data. Kesimpulan penelitian menunjukkan bahwa rancangan aplikasi berbasis web dapat mengubah cara pelayanan administrasi desa dilakukan menuju sistem yang lebih modern dan responsif