Todo App

Live Demo

Purpose

This Website use to manage your personal tasks in good way to organize your daily works.

What You will Find :-

You can add your daily tasks to your personal todo and arrange them and remove any task, all tasks will be saved and you can view them every time.

Next.js

Introduction

Building a modern JavaScript application powered by React is awesome until you realize that there are a couple problems related to rendering all the content on the client-side.

• First, the page takes longer to become visible to the user, because before the content loads, all the JavaScript must load, and your application needs to run to determine what to show on the page.

• Second, if you are building a publicly available website, you have a content SEO issue. Search engines are getting better at running and indexing JavaScript apps, but it's much better if we can send them content instead of letting them figure it out.

So what is the solution for this probelm? 🤔

The solution to this problems is server rendering, also called static pre-rendering. Next.js is one of the React frameworks that do all of this in a very simple way, but it's not limited to this. It has many other features which helps us through building our application.

Next.js is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.

The main features of Next.js 🌟

1. Hot Code Reloading:

   It automatically reloads the application when changes in the code get saved.

2. Server Rendering:

   Easily render react component on server before sending HTML to client.

3. Automatic Code Splitting:

   By this feature, every import in the code get bundled and served with each page. It means that unnecessary code never get loaded on the page.

4. Styled-JSX:

   Styled-JSX allows you to write CSS directly inside JavaScript code.

5. Ecosystem Compatibility:

   Compatible with JavaScript, Node and react.

6. Automatic Routing:

   Any URL is mapped to the filesystem, to files put in the pages folder, and you don't need any configuration.

7. Dynamic Components:

   You can import JavaScript modules and React Components dynamically.

8. Static Exports:

   Using the next export command, Next.js allows you to export a fully static site from your app.

Example

function Main() { 
  return ( 
      <div className="container"> 
      <p>Hello G8</p> 
      </div> 
  ) 
} 

export default Main 

Next.js vs Gatsby :roll_eyes:

Next.js and Gatsby are great tools, and you can use it to power your applications. But When is Next.js better than Gatsby? 🤔

If you have lots of content, then static generated web pages (Gatsby) are not the best solution for you. The reason is that it takes much time to build the site if you have lots of content. So if you have a site with content that you will expect to grow and grow over time, then Next.JS is the best choice for you. Also, if you want more freedom with how you access your data, Next.JS is worth a try.

On the other hand, Gatsby is great if you are just developing a smaller application or one that will be pulling directly from a CMS. Gatsby is easier to set up, which is a great fit if the project is on the smaller side.

Next.js provides a backend that can server side render a response to request, allowing you to create a dynamic website, which means you will deploy it on a platform that can run Node.js. And guess what?! Next.js can generate a static site too 🤩 😍

Resources :-

1. Youtube Course
2. NEXT.JS documentation
3. Create a Next.js App
4. Gatsby vs Next.JS - What, Why and When?