Creating an installable Next.Js Application

Next.js, a React framework for server-side rendering, provides a solid foundation for creating fast and efficient web applications. In this article, we will explore the process of creating an installable Next.js application, taking advantage of the PWA features offered by modern browsers. What is a Progressive Web Application (PWA)? A Progressive Web Application is a web application that utilizes modern web capabilities to deliver an app-like experience to users. PWAs are built with web technologies such as HTML, CSS, and JavaScript and can be accessed through a browser without installing an app store. PWAs offer several advantages, including offline functionality, push notifications, and the ability to be added to the user’s home screen for quick access. ...

June 25, 2023 · 5 min · Chris Achinga

How To Convert HTML templates to NextJS (v13)

Now that Next.JS is an awesome frontend tool. How can we get HTML/CSS/JS Templates to work perfectly in a Next.JS project? This article will take you through the steps. Requirements To fully grasp the content, it’s highly recommended that you have the following tools installed on your development environment: NodeJS Text Editor (Maybe VIM?) Basic React.js and Next.JS knowledge Finding a Template For the demo, we will use one of the open-sourced templates from Startbootstrap. We will use the Freelancer theme, a perfect template for a personal portfolio website. ...

February 22, 2023 · 4 min · Chris Achinga

How to configure Bootstrap SCSS and JS into a NextJS Project

Bootstrap is one of the simplest and most used CSS libraries. This article will guide you on configuring a NextJs project with Bootstrap SCSS and JS files. Codesandbox Demo %[https://codesandbox.io/p/github/achingachris/next-bootstrap-template/draft/zealous-archimedes] GitHub: %[https://github.com/achingachris/next-bootstrap-template/tree/config-bootstrap-scss-and-js] Creating a Next.js Project If you already have a NextJS project, skip to the next step. On a terminal, run the following script to set up a NextJs project: npx create-next-app@latest After installation, run: npm run dev A successful setup will run on localhost:3000. ...

November 15, 2022 · 3 min · Chris Achinga

Deploying NextJS on Netlify - Starter Template

Deploying NextJS to production By default, NextJS applications are easily deployable on Vercel with zero configurations. That doesn’t mean you shouldn’t explore what other platforms have to offer. To deploy a NextJS application, simply follow the steps below. If you want to start straight up without the hustle, use the button below: Create a Netlify Account On your browser, go to https://app.netlify.com/signup to create your Netlify account. ...

February 5, 2022 · 2 min · Chris Achinga

My Current Project(s)

TL;DR I started focusing on projects that would land me my first ever software development job this week. So I have been dealing with creating applications with functionalities that introduce me to the most commonly used features throughout the industry. So I have been working on payment integrations and re-designing my portfolio. I love following the ‘Build as I Learn’ technique, so I started two projects, one called ’ Fundraiser ’ and the other one ’ Community Space ‘. ...

April 8, 2021 · 2 min · Chris Achinga