
## Why?

So, you are developing a dynamic website. Gonna have to link the JavaScript file in HTML sometime or the other. Now, where do we link it?

It's better to link the JS file near the body end tag since HTML is parsed from top to bottom and if you are making DOM manipulations, placing the **script** tag inside **head** tag will break the code.

### Do not Do This

```html
<html>
  <head>
    <script type="text/javascript" src="test.js"></script>
  </head>

  <body>
    ...
  </body>
</html>
```

### Do this Instead

```html
<html>
  <head>
    ...
  </head>

  <body>
    ...
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>
```

But writing it this way can make the code really messy as the script tag inside the body tag serves no purpose except linking. Wouldn't it be great if there were a way to use it in the **head** tag ?

## Solution

This is where the *defer* keyword comes in handy. We can now write the code like this:

```html
<html>
  <head>
    <script type="text/javascript" src="test.js" defer></script>
  </head>

  <body>
      ...
  </body>
</html>
```

**defer** makes sure that the script will be downloaded and executed only once the rest of the document has finished rendering!

Voila! All the *script* tags are in a single place now making the code more clean!

Of course in the end it is your personal preference where you want to place the tag but I strongly recommend using the **defer** keyword.

#### You can also look into the **async** keyword which serves a similar purpose [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)

Using the defer Keyword


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)


Hi, I'm Sai Sridhar

Featured Posts

Using the defer Keyword

Getting Started with NextJS