DEV Community: crater90

Beginners guide to NextJS...

crater90 — Tue, 15 Feb 2022 15:24:11 +0000

This blog totally explains the basics of Nextjs and is for beginners who are searching for an easy getting started with Nextjs guide. In this article, we will look at a few basic features and concepts like SSR and static site generator SSG and I have also tried to answer the most asked question React vs NextJS

PS: You must have done the basics of React.

What is NextJS ?

NextJS is a complete full stack framework built on top of ReactJS, having a lot of features which makes the development easier and faster. It serves functionalities like server-side rendering and generating static websites, is SEO (Search Engine Optimization) friendly and has a great developer experience.

Do we really need NextJS ?

We often have the question that isn't plain React good enough to build powerful apps. Yes, plain React is great. But when we are making large scale applications we need optimizations, a folder structure and a lot of extra dependencies like routing, etc. NextJS makes it easier for us. It bundles the existing React library with additional features which makes development easier, faster and developer friendly.

I will try to explain the core advantages of NextJS in simple points.

1. Inbuilt file based routing system with dynamic routes

we have a folder structure convention which needs to be strictly followed. All the pages are created under /pages folder and have route based on file names.
A new Home route can be simply created by creating file home.js /pages/home.js

PS: if you are building a multi page page app having multiple routes NextJS >> plain React.

2.Pre Rendering and client side rendering

It pre renders every page by default. It means HTML for each page is generated in advance. It results in better performance and SEO. Pre rendering is of two types :

a. Static site generation (SSG): In this method, all the pages are generated at the build time and will be reused on each request. If you have same type of pages like blog posts and ecommerce product listings, you should do SSG.
b. Server side rendered (SSR) : In this method, the HTML is generated every time when a request is made. It results in slower rendering when compared to Static generation (SSG).
c. Incremental static regeneration (ISR) : NextJS allows you to update the static site you have build. ISR enables you to use static generation on per page basis without rebuilding the entire site. It can be said a mix of positives of SSR and SSG.
d. Client side rendered (CSR) : This is the same method that is being used by React. In this you can easily render some parts of page by client side Javascript.

Interestingly, you can choose different data fetching techniques for each page in the Next app according to the requirement.

3. API routes

It provides a solution to build your APIs with Next.js giving you full stack capabilities. Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. These files are server-side only and won't increase your client-side bundle size. You can build an entire API for a new project.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

There's a lot to know about NextJS. It also packs interesting features such as Built in CSS support, image optimization, fast refresh dev environment, powerful middlewares, typescript support, routing, SEO, etc. Comment below and let me know if you guys want to know more about it.

I would highly recommend NextJS to someone who is exploring web development and also looking to learn WEB 3.0. You will surely love it.

Hope you learnt something. Happy coding! 🚀👨‍💻

5 GitHub Repositories for learning developers...

crater90 — Sat, 04 Dec 2021 10:44:36 +0000

For programmers and budding developers, GitHub is always the first choice to explore and learn new tech. It is the home of some of the most interesting and famous open source projects. It is also a great place for sharing resources of all kinds, from free books to APIs, from roadmaps to project ideas.

Having a massive collection of repositories under the hood, it has always been a tedious task to find good GitHub repos. In this article, we will look at a few repositories that I have found useful to build/improve skills in software development.

1. developer-roadmap

With over 178k+⭐, This repository is great for those looking for a career in software web development. The repository focuses on Front-end, Back-end and DevOps career tracks. The repository covers all the skills and technology required for each of these paths. It also provides a strategy to learn these skills in a structured manner.

2. Build your own X

If you are someone who doesn't get the theory part and always want to know what goes behind this repository is a daily stop for you. It has links to the resources which help you build your own Cryptocurrency, Database, Bots, BitTorrent Clients, and many more.

3. free-programming-books

Reading a book is still one of the best ways to learn a new topic. This repository has a massive collection of free programming books useful for learning all sorts of technology.Buying a book is often costly. Fortunately for us, there are many free books available on the internet for developers.

4. coding-interview-university

This repository will help you land a job in FAANG companies, curated by the software engineer at amazon this is a full preparation guide on cracking the toughest interviews. It also has links to the flashcards for quickly brushing up your knowledge and stay updated.

5. system-design-primer

This is a great repository for developers that teaches how to design large-scale systems. The repo provides an organized collection of resources for this broad topic. System Design is a must known topic for most of the tech-interviews hence, this is the perfect stop to learn system design.

Bonus😉 for JS developers..

6. javascript-algorithms

If you are in web-development and want to learn DSA have a look at this amazing repository that presents JavaScript-based examples of many popular algorithms and data structures. Furthermore, each algorithm and data structure has related explanations and YouTube video links for further reading.

Hope you will learn a lot. Happy coding! 🚀👨‍💻

Introduction to Git and GitHub

crater90 — Sat, 04 Dec 2021 09:47:38 +0000

Just started a career in development, or working on a project where you need people to collaborate, or want to contribute to open source, then git is the real solution for all problems.
In this article, we will deep dive into the git and GitHub as a beginner.

You don't need to be a black screen coder or anything on a pro level to start learning git. Getting familiar with git and GitHub isn't that complicated.
lets get started !!

What is git?

Git is the most commonly used Version Control System (VCS). It is free and open source. It also makes collaboration easier allowing changes by multiple people to all to be merged into one source. Git is responsible for everything GitHub-related that happens locally on your computer.So git is basically a content tracker.
Simply visit this page to download and install Git to your machine.

Then Whats GitHub ?? 🧐

GitHub is a Git repository hosting service. It stores a copy of your local files and their revision history. It lets you and others work together on projects from anywhere. While Git is a command-line tool, GitHub provides a Web-based graphical interface. It is a cloud-based hosting service that lets you manage Git repositories. It also provides access control and several collaboration features, such as wikis and basic task management tools for every project.

To conclude the definitions,

We can track progress of our projects using git.
We can create different git repositories of different versions of our project.
We can host it on cloud using git-hosting-service named GitHub.
GitHub provides accessibility and features for enhancing developer experience.
Congratulations !!! Git and GitHub are not same anymore.

Thanks for sticking by. There's a lot more to come. Thank you !!😀