Next.JS - the production ready react on steroids framework
Tags: javascript, nextjs, react, webdev
Published: 2022-01-07 14:56:10

![nextjs is a react based framework](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkdAR-wWzQyu7bNf4GmKqyOwGb5-HqEXuwmg&usqp=CAU)
[Next JS](nextjs.org) is an amazing JavaScript framework made on the existing react framework made by [Facebook](https://facebook.com/). Factors that make it amazing or the SEO features. Also [Next JS](nextjs.org) as an inbuilt support for API structures which make it even more amazing when working with APIs.

It has a ton of inbuilt modules which makes development even more amazing text to image module as an instance. It automatically optimises the images as per the weight and height and other factors. The `link` module enables no refresh routing which fetches the JavaScript code and renders that instead of redirecting you to another page.

It's called react on steroids because of all these inbuilt module sentence of features which come along with next.
Other frameworks like [blitz.js](https://blitzjs.com/) are made on top of next.js, adding more functionalities to the framework. [Next JS](nextjs.org) has a support for [server side rendering](https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/) which makes it incredibly faster than react and the content is available to web crawlers too.


[Next v12 is now using rust compiler](https://nextjs.org/blog/next-12) and is having 5x faster builds than before!
![next.ja is fast!](https://c.tenor.com/EnZGimQ0SQ8AAAAC/speed.gif)
### installation
To initialise a next.js application, run:
``` bash
npx create-next-app@latest
# or
yarn create next-app
```
You can create a TypeScript project with the --ts, --typescript flag:
``` bash
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
```

### file systems in next
now see the file structure carefully
![file system](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSN9M_CsJYpZ2OPTbgh14yF7qD63Dt48orTlA&usqp=CAU)

The `pages` directory is the entry point of the application as well as the URL structure of your website.
That is, `pages/about.js` will be available at `[url]/about`


The `public` directory will contain your assets and other images for files which are not controlled by next.
You can create as many folders and can also access them.


Like, making component folder which will contain usable components which you can reuse in different pages without writing same code every time.

### wrapping up
Next js is an amazing framework for creating beautiful applications with react which perform amazingly in search results and performant on the user's side.
It's evolving into other framework too like [blitz.js](https://blitzjs.com/) which are having a bit of ruby like approach.
Anyways, next is a must try if you're a react developer!


## originally published [here](https://atordvairn.netlify.app/next-js-the-production-ready-javascript-framework) at my blog
Make sure you're subscribed to [the high dose javascript newsletter](https://www.getrevue.co/profile/atordvairn)

of course I can't _make_ you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!