React 19 ja Next.js : palvelimen hyödyntäminen Reactilla

Abstract

React on kirjoittaessa yksi suosituimmista käyttöliittymien rakentamiseen tarkoitetuista ohjelmakirjastoista. Reactiin on sen uusimmassa versiossa tuotu palvelinpuolella toimivia ominaisuuksia, jotka ovat käytettävissä Next.js -ohjelmistokehyksellä. Tämä opinnäytetyö toimii oppaana Next.js:n, Reactin ja niiden uusimpien ominaisuuksien käytössä. Opinnäytetyössä tarkastellaan myös kirjallisuutta verkkokehityksen (web development) ja JavaScriptin historiasta, verkkosivujen renderöintimenetelmistä ja muista työn viitekehyksenä toimivista teknologioista. Opinnäytetyö sisältää myös Next.js:llä toteutettuja esimerkkejä yleisesti hyödyllisistä verkkosovellusten toiminnoista. Työn toimeksiantajana toimii Enersoft Oy. Enersoft Oy on ohjelmistoyritys, jonka asiakkaita ovat sairaalat ja laboratoriot.

Työn osana on tuotettu uusi käyttöliittymä Enersoftissa tekeillä olevaan eFarm-verkkosovellukseen. Sovellus rakentuu pääasiassa kahdesta osasta: Create React App:lla valmistetusta React-sovelluksesta ja Express Js:llä rakennetusta rajapintaohjelmasta. Projektin kasvaessa nousi tarve korvata vanha käyttöliittymä, koska sen ylläpito vaikeutui uusien toimintojen myötä. React-sovellus korvataan muuttamalla sovelluksen rajapinta Full-Stack-ohjelmaksi, jossa käyttöliittymä tehdään Next.js:llä. Lisäämällä Next.js rajapintaan voidaan hyödyntää uusimpia React 19 -version palvelinpuolen toimintoja kuten palvelinkomponentteja ja -toimintoja.

Opinnäytetyön jälkeen sovelluksen kehitys jatkuu tuomalla siihen vielä puuttuvia osia vanhasta käyttöliittymästä ja toteuttamalla ensimmäiseen versioon tarvittavia toimintoja. Työtä tehdessä opituista asioista tulee myös olemaan hyötyä tulevissa projekteissa.

Currently, React is one of the most popular libraries for building user interfaces. In React’s newest version new server-side functionalities were added that are usable in the Next.js framework. This thesis acts as a guide to using Next.js, React, and their newest functionalities. The thesis includes an overview of the history of web development and JavaScript, rendering methods, and other relevant technologies. Examples of common functionalities found in web applications that are implemented with Next.js are also included. This thesis was commissioned by Enersoft Oy. Enersoft is a software company whose customers are hospitals and laboratories.

Alongside the theoretical part, a new user interface was built to a web application consisting of separate front-end and back-end applications. The old front-end application was replaced by adding Next.js to the back end making it a Full-Stack application. By adding Next.js to the backend, it is possible to take full advantage of React’s new Server Components and Actions.

The application will continue to be developed by implementing new features and features missing from the old user interface.