Whenever we start doing a web project we always think of what framework should we use to create a good-looking elements for our website. Each framework has its own pros and cons, allowing you to choose based on the needs of your project. For example, if your project is simple, then there’s no need to use a complex framework.
Most developers preferred on using popular UI frameworks such as Bootstrap, Foundation, and Material UI, however, others, including myself thinks that these frameworks are too overrated and many sites that are using these frameworks end up having a very similar look and feel. I personally like building my projects before with Bootstrap + jQuery, but lately I realized that part of me as a developer has grown tired of seeing sites using Bootstrap in its raw form — in a way, I feel it limits creativity.
Discovering Next.js
I used to be a developer who uses native PHP and HTML5 together with Bootstrap, CSS3, and jQuery to build full-stack and single page applications (SPAs). Two years ago, I decided to learn how to use React and started experimenting with different frameworks to test its UI and UX capabilities. React was too confusing for me, I spent more than a month trying to solve rendering and configuration problems… And for that reason, I became impatient, so I started looking for an easy-to-use boilerplate for React. Eventually, I found what I was looking for. It’s a framework called Next.js.
As documentation says:
Next.js a minimalistic framework for server-rendered React applications.
Think about how web apps are created with PHP. You create some files, write PHP code, then simply deploy it. You don’t have to worry about routing much, and the app is rendered on the server by default. That’s exactly what Next.js do. Instead of PHP, you will build your app with JavaScript and React.
Here are some cool features Next.js brings to the table taken from learnnextjs.com:
- Server-rendered by default
- Automatic code splitting for faster page loads
- Simple client-side routing (page based)
- Webpack-based dev environment which supports Hot Module Replacement (HMR)
- Able to implement with Express or any other Node.js HTTP server
- Customizable with your own Babel and Webpack configurations
I believe anyone who has used this framework will tell you how easy it is to get started in building a react app with Next.js. You can have your react app running without configuring webpack, babel, and other tools and speed up your development workflow.
Playing around with Semantic UI for React
Another technology I discover while doing a react app was a UI framework called Semantic UI. Just like Bootstrap and other popular frameworks, it’s also open-source and is already used in multiple large-scale production environments.
I already heard about this framework even before, but I was only able to use it when I started developing apps with React. One of the advantages of Semantic UI is it has a lot of UI components to offer. In just few lines of code, you can create beautiful and modern-looking elements just like Cards, Accordions, Modals, and other more that can benefit to the content of your website. Of course, you are free to modify some of its CSS properties if you need to. Also, what I like the most about this framework is it uses five descriptive categories to define re-usable UI components:
- A UI Element is a basic building block. It can appear alone or in uniform groups. For example, a button can be independent or put in a button group.
2. A UI Collection is a group of different kinds of elements that are interdependent. For example, a web form can have buttons, inputs, checkboxes, icons, and so forth
3. A UI View represents a common piece of website content. For example, a feed or comments section.
4. A UI Module is a component with interactive JavaScript-based functionality. Examples include an accordion, dimmer, modal, and so on.
5. A UI Behavior is a component that can’t exist independently, but instead is used to inject functionality into other components. For example, the Form Validation behavior provide validation functionality for the Form component.
Working and Deploying a React app with Next.js and Semantic UI
This project that I built was developed just in less than two weeks while I was in the bench. I finished this SPA together with my colleague who I also helped to develop a chatbot using Microsoft’s Bot Framework. The project is made for their team who are conducting internal workshops about AI-related stuff.
Setting up of this project was made with create-next-app boilerplate and deployed on Azure IISNode Web Server.
One of the challenges while working in this project is playing around with CSS3 animations as well as with Spring. I would say creating fancy and smooth animations is harder than creating the whole website.
Another challenge is the deployment of React app that is made with Next.js on Azure. It took me some time to be able to deploy it successfully. So, if you have a Next.js project and you’re planning to host it on Azure, you can use my created script below which compresses necessary files on your project. After the script is being executed, you can upload this compressed file and extract it on your web app server to start the deployment of your project in the cloud.
Overall, my experience in working with Next.js and Semantic UI is very fulfilling. Both of these frameworks are very well documented, and their websites provides many examples for each component. All of this makes learning the framework a pain-free experience. So, if you’re new to React or planning to use it on your future project, the best way to learn it is to get started with Next.js and then later on, you can proceed on building your components with Semantic UI or your preferred UI framework.
Additional Resources
