Next.js introduction Part 1

In short, next.js is a web development framework used to create react websites which are more optimized – in the sense of speed, SEO( search engine optimization ) and much more.

Problem with React.js

The approach react, by default uses is to load the entire website bundle to the client browser. And after that, each and every step, like – page rendering, data fetching, etc. is executed with the help of javascript. This might sound like a good way, but in reality it isn’t that good.

First this method makes your site kind of slow as there is too much load given to your browser. Which most of the time is due to re – rendering of its components.

Second, this method is not very SEO friendly as bots of different search engines are unable to index this kind of websites. You also might have seen preview image and text when a link is shared of certain websites. This feature is also not available when talking about react, as the content in your website is generated by javascript only when you visit the website.

How Next.js solves this

Next.js solves all these problems by its different page building strategies and special content optimizing techniques. Next.js also makes the development process much easier by its features like file based routing and much more.

Now its time to see how to make one.

Creating our Next.js site

DOC

Now before we start making our own beautiful website, I would like that you refer to the official next.js documentation here.

It has a lot of info regarding next.js and you can use it according to your need. Although I’ll be showing you the important steps.

Setting it up

First you need to create a folder where we will be doing everything. I have named my folder ‘My App’.

Then open the folder using your code editor. I prefer using VScode which you can download from here.

Open a terminal and write the following code there.

npx create-next-app@latest
# or
yarn create next-app

You can use npx as well as yarn.

This will create the entire next.js app layout for you. But it would take some time.

It might ask for your app’s name and few more things, just keep in mind, these options change with different versions. Just select what suits you. When done you should get something like this.

Overview of each file folder

Node modules – contains all the modules and packages installed by npx
package.json – info about the site commands and packages and dependencies in a json file
package-lock.json – info about site packages and dependencies and their dependencies too. Basically has the list of every single module installed in a json file.
pages – folder which describes the page hierarchy of your website. Every .jsx or .js file / component you make here will be available to your website. Hence no need to some external router.
styles – folder where you can keep your css.
public – folder containing data which is available to the client. Like images etc. Anything you keep here can be fetched in the root directory like this ‘/FILE_NAME’

Running the site

To see how the site looks like first you need to go inside the ‘tutorial-app’ directory or whatever you have named it. And run

npm run dev

This will open the site in localhost:3000 available in the browser

This is actually the index.js file in your pages folder. Now lets scrap out this entire page and see things step by step by the following code

NOTE: remove the css import in _app.js first, we’ll talk about that later

import Head from 'next/head'
import Image from 'next/image'

import Link from 'next/link'


export default function Home() {
  return (
    <>
      <Head>
<title> hello guys</title>
      </Head>

      <Image src="/favicon.ico" height={144} width={144}/>

<div>Next.js Tutoral By RoxxHub</div>
<div>here is <Link href={'/about'}> about</Link></div>

    </>
  )
}

As you can see, its simple react, but we have imported few other stuff like head and image

These are basically some powerful extension provided by next.js. Head can be used to set metadata of a page. And Image helps to serve images in an optimized way. You can also notice how we have used the favicon image in the public folder.

Creating pages

You can make more pages inside the pages folder. Lets say we create an about.jsx file with the code –

import React from 'react'

const about = () => {
  return (
    <div>I am a good man</div>
  )
}

export default about

To open this page, you can notice, in the index.js file, we used Link extension.

_app.js and document.js

These 2 files define the layout of your site and their existence can be ignored. Except a few places. For example – it is recommended you should be linking to any cdn or other script inside the heat tag in document file only. Although head tag can be used anywhere, it is the best to keep it here.

On the other hand _app.js can be used to do that app.js / index.js does in react – To link permanent components like navbar and other things like context etc. As you have noticed, we removed the css import here, because if it was there, the entire site would have looked different