Image for post
Image for post
Source: ideas.byteridge

Next.js is one of the most famous React Framework for Production. Next.js is gaining its popularity among the developers since it provides the best developer experience with all the feature that you need for production like: Typescript support, hybrid & server rendering, smart bundling, route pre-fetching with “No Configuration Needed”.
Recently, version 10.0.0 has been released for Next.js with many exciting features that are making it more attractive for developers and among the businesses.
I’m going to point out some of the basic features and their implementations in this article. You need to have basic knowledge of Next.js before starting it. If you are new to this framework, please refer to the official documentation of Next.js. …


Image for post
Image for post

Next.js is gaining its popularity among the react lovers because of its very useful and interesting features. Most of us use next.js for server side rendering, page based easy routing and many more. After building an application, we are always concerned with deploying the application in some cloud environments.
Firebase provides different services like authentication, real time database, hosting, etc. I have already written an article about Deploying next.js application using firebase hosting. Today I will be explaining about Deploying next.js application with SSR using firebase cloud functions. So, let’s start our implementation with a new project.

Create Next.js Project

First of all, let’s create a project for deploying it to firebase and let’s name it as next-ssr-deploy. …


Image for post
Image for post
source: vriad.com

“Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.
Firebase Hosting is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).“ — Firebase

Next.js is very awesome react framework to build applications, mostly preferred for its most useful feature, Server Side Rendering. It is very easy to learn and use for the react developers.
Firebase also provides various services like authentication, data storage, firebase functions, real time database, hosting, etc. Among them we will be using the most useful and easy to use service called firebase hosting today, in this article.
We will be creating a simple next.js application and deploying the same application using firebase hosting. We will use some tricks to deploy next.js project easily with firebase hosting. …


Image for post
Image for post
Source : Auth0

Next.js has been really an incredible framework for the react developers. Most of the react developer loves Next.js because it is one of the most popular react framework to be used for server side rendering, mostly. Next.js also has a very impressive documentation which makes a developer to learn quickly.
Monorepo structure is very famous and useful structure which helps us to store multiple projects in a single repository. Monorepo structure helps to share code between these projects. There might be various use cases for Monorepo structure, but today we will be developing a complete monorepo based react application using Lerna. Basically, Lerna is a tool for managing Javascript project with multiple packages. This application consists of two projects (I’ll prefer to call them packages): Users Package and Admin Package which shares the code with Shared pacakge. So, this might a little bit lengthy article but I’ll try to make you understand what I would do. …


Image for post
Image for post
src: blog.pusher.com

Next.js is very beautiful and powerful react framework loved by more people day by day because of its amazing features. People often switch to Next.js for Server Side Rendering and for making SEO friendly applications.

Often we get stuck into image rendering problems and problems using svg images while starting with Next.js. I personally got into some dilemmas while working with images in Next.js for the first time. So, I decided to write about it with a hope that you people do not stuck into these kind of troubles.
We will create a sample application for rendering the image and observe its different scenarios. …


Image for post
Image for post
Source: pkj.no

Next.js is the powerful react framework that solves different problems like Server Side Rendering, Pre-rendering, SEO, etc. But it always keeps you very close with awesome library — react to develop your application. Next.js is bundled with plenty of built-in classes for better Developer Experience like:

  • Page based routing system (with support to custom routing)
  • Pre-rendering, both static generation and server side rendering
  • Client-side routing with optimized prefetching
  • Built-in CSS and Sass support
  • Development Environment which supports hot module replacement

Next.js has been trusted by the very big companies in the world. If you are from the react background, then you will find almost everything similar to react while using Next.js. Today, in this article, we will be developing a very simple Next.js application with some design and layouts and we will fetch api using pre-rendering. …


Image for post
Image for post
Source: blog.logrocket.com

Go is the hottest programming language in the era we are living in. Go is very simple but offers similar performance to those low level languages like C++. Go is referred to be the fastest programming language that offers very high performance. Gin is one of the incredible framework of Go, which is lightweight and massively fast. The interesting feature of Gin is that it provides custom version of HttpRouter which makes the API routes extremely fast, than that of other Go frameworks. It is claimed to be 40 times faster than another Go framework called Martini and of course, it provides a lot more benefits compared to other frameworks and other programming languages.
Gin is just the microframework which does not provides you a lot of features as of other frameworks. It just provides you necessary tools to build api, such as routing, validation, etc. Experts believe that Gin is best for long term investment, to grab proper advantage of its high performance and flexibility.
Today, we will be creating a very simple API using Go, Gin, Gorm and Mysql as database. We will be performing the CRUD operation for user with few fields. You need to have clear knowledge of Go, to get started with the project that we are going to do.
Let’s Go! …


Image for post
Image for post
source: namtech.com.au

We are going to deploy the simple static react application without any back ends, today in this session. There are many other ways to deploy application in GCP but the simplest deployment, I guess, is what we are going to perform now. If you want to learn more about GCP and the services they provide, you can consult with the official documentation. So, let’s create a simple react application and deploy it using Google Cloud storage and bucket.

Create React App

First and foremost thing we are creating a brand new react application. We are not going to deploy a very large application, but just with some texts to display. As usual we will create react application with create react app using typescript. …


Learn with a basic example

Image for post
Image for post

Following the Ant Design specification, we developed a React UI library antd that contains a set of high quality components and demos for building rich, interactive user interfaces.

✨ Features

🌈 Enterprise-class UI designed for web applications.

📦 A set of high-quality React components out of the box.

🛡 Written in TypeScript with predictable static types.

⚙️ Whole package of design resources and development tools.

🌍 Internationalization support for dozens of languages.

🎨 Powerful theme customization in every detail.

Source: Ant Design

I have found ANT Design as the smart option to design our web applications using react. It provides us high quality components which we will be observing while developing the project, in the article later on. If you look around to the documentation provided by ANT and observe its demo of different features, you will find ANT as the better option for you application. So we will be developing a simple react application using following ANT Components. …


Demonstrate a simple CRUD operation using React and Node.js

Image for post
Image for post
Source: clarisoft.com

React is a Javascript Library used to build user interfaces. React is very popular in today’s world because it works very quickly since it uses Virtual DOM that makes it faster for very small to very large types of application. Similarly, Node.js is an open-source, cross-platform, JavaScript runtime environment. We will be using node.js and express as our back end to create API and React for our front end. Obviously, we will be using MongoDB as our database to store data. I will cover less portion of Node.js because I already have an article about Creating API with Node.js, Express and MongoDB. …

About

Sudeep Timalsina

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store