Build A Live News Application With Next.js 13
Zhao, Ziang (2023)
2023
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202304155335
https://urn.fi/URN:NBN:fi:amk-202304155335
Tiivistelmä
The objective of this thesis is to leverage the advanced capabilities of Next.js 13 and expertise in front-end development to develop a web application that enables users to access and search for comprehensive information and details pertaining to the latest news globally.
This web application follows an online tutorial titled “Build a live news app with Next.js 13” and employs split-stack development as an architectural paradigm, wherein the front-end and back-end development components are dissociated into two distinct stacks that function autonomously and interact through APIs. The front-end of the application is constructed utilizing the Next.js 13 framework, in conjunction with React, Typescript and Tailwind CSS, while the back-end is established upon a MediaStack News REST API and can be queried through the GraphQL interface implemented using StepZen.
This study showcases the implementation of Next.js 13 and other advanced front-end technologies to develop a compelling user interface for browsing live news. The resulting application affords users the ability to peruse the most recent news updates from across the world, categorize said news according to type, and conduct targeted searches. Additionally, the inclusion of a dark mode feature further enhances the user experience, and the deployment of the 2 application on Vercel ensures a comprehensive and user-friendly solution forbrowsing news content.
In conclusion, this study underscores the multifaceted potential and practical applications of Next.js 13 for software development. As such, it constitutes a
valuable addition to the body of knowledge in the field, offering insights into the utilization of these technologies to create functional and engaging applications.
This web application follows an online tutorial titled “Build a live news app with Next.js 13” and employs split-stack development as an architectural paradigm, wherein the front-end and back-end development components are dissociated into two distinct stacks that function autonomously and interact through APIs. The front-end of the application is constructed utilizing the Next.js 13 framework, in conjunction with React, Typescript and Tailwind CSS, while the back-end is established upon a MediaStack News REST API and can be queried through the GraphQL interface implemented using StepZen.
This study showcases the implementation of Next.js 13 and other advanced front-end technologies to develop a compelling user interface for browsing live news. The resulting application affords users the ability to peruse the most recent news updates from across the world, categorize said news according to type, and conduct targeted searches. Additionally, the inclusion of a dark mode feature further enhances the user experience, and the deployment of the 2 application on Vercel ensures a comprehensive and user-friendly solution forbrowsing news content.
In conclusion, this study underscores the multifaceted potential and practical applications of Next.js 13 for software development. As such, it constitutes a
valuable addition to the body of knowledge in the field, offering insights into the utilization of these technologies to create functional and engaging applications.