Getting started with NextJS

Table of Contents

Resources used:

NextJS

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

React is a library. Next.js is build upon that library, a react framework.

Notes:

  • We can modify HTML page using Javascript, this is imperative programming.

  • React is the library by which we do not have to specify about how to modify HTML.

  • We have to just declare what we want the UI to be and React does it for us.

  • There are three core concepts of React that you’ll need to be familiar with to start building React applications. These are:

    • Components
    • Props
    • State

1. Creating project structure

  1. Create a dir, cd in to it.
  2. Inside it create “package.json” file with empty object {}.
  3. In terminal at same dir
$ npm install react react-dom next
  1. Create new dir inside root dir of your project called pages. Create a file index.js too.
  2. Add files to pages with .js or .jsx extensions.
  3. Inside “package.json” add:
"scripts": {
        "dev": "next dev"
    }

Like this:

  // package.json
   {
    "scripts": {
        "dev": "next dev"
    },
     // "dependencies": {
     //   "next": "^11.1.0",
     //   "react": "^17.0.2",
     //   "react-dom": "^17.0.2"
     // }
   }

2. Creating project from template

$ npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Run the project by

$ npm run dev
Tags :