Next.JS ON MY OWN.
Tags: nextjs, javascript, node
Published: 2021-01-21 16:21:55

> NEXTJS is a powerful framework for developing web applications.
- Source code is supper support for SEO.
- Image component is a pillar in NextJS.
- Support two methods for rendering pages.
- Easy for optimizing the components.
- React is the core library for developing applications.

## RENDERING
### Static Rendering
- Render ***HTML*** at the build time - ```npm run build```.
- We can re-render the page before every request of the user.
- It's useful for the page by content is not usually changing.
- We can use this method on the page: product list, post list, introduction, about, contact, help or documents, etc,...
- In this method, we have two functions that are the main method rendering on the page.
+ ```getStaticPaths``` -> render the URL for page.
+ ```getStaticProps``` -> render content of the page.
+ Two methods above it's should be used together on the same page.
+ If one of these methods does not appear, the error will show when we build the application.

### Server-side Rendering
- React flow is rendered HTML on the ***client-side***. But in NextJS is different, the framework will render HTML in the server as ASP.NET CORE or MVC Web framework.
- It's better than static-rendering because draw HTML from the server is way the SEO tracking and analytics for the website.
- So this is a method useful for build page like the detail of product, post detail, some page we need to tracking from SEO.

## CSS power support design.
- CSS in NextJS works the same in other frameworks but in NEXTJS, that distributes in two methods are global CSS and component or plugin CSS.

### Global CSS
- Working base on the root page which they invoke into the whole page of the application.
- When we want to use the CSS is global we must define the name of the file in ```styles``` folder in ```<name>.global.css```.

### Component or plugin CSS.
- Working base on the component with name is defined ```<component>.module.css```.
- It's just working around the component, out of the scope of them it never works.

### CSS in js
- Also we can style the component or page.
```jsx
<style jsx>
{ ... }
</style>
```
- It's impossible for a single component, but I don't think it's useful for maintain the application later.

## Image - super powerful component
- The pillar in NextJS.
- It's provider functions for optimizing image media in the page with the best support for SEO by ```lazy-loading``` by default.
- We just need a ```config``` image source then we can enjoy the performance of the page.

## Static file serving.
- Root director of file in Nextjs is in ```public``` folder - ( ```' / '``` ).
- Any file in there will be public in the internet.
## Environment Variables.
- NextJS using a file ```.env.local``` in developing then they will cut all content into ```process.env``` of NODEJS.
- It's provider the different environment variable with ```NEXT_prefix```.

## Fast refresh - I think anyone can know it.
## Routing
- By <code>pages</code> is the root directory for <code>path</code>, so any page and URL will be generated in there.
- And the folders or files inside the <code>pages</code> folder are generated URL or route in the NEXT application.
- Example:
```bash
pages/index.js
=> '/' - Home page
pages/products/index.js
=> /products/ - Products page
pages/products/[...all].product.js
=> /products/1234 - Product detail page of product id is 1234
```

## Linking
- Okay, NextJS allows the application to convert the page as a SPA and also provides a linking dynamic path, allowing dynamic linking between the parameters.
- To access the React component's `router` object you can use ```useRouter``` or ```withRouter```, the page use usually ```useRouter```.

## Dynamic Routes.
- This is a more in-depth section on Routing in Nextjs, as mentioned that the routing architecture of Nextjs is slightly different from other frameworks. Here's how the router works.
- Use brackets `[params]` to a page to use dynamic paths.

Example:
`/pages/products/[id].js`
The result that we get is `{"id": 123}` or `{"id": "apple-juice"}`

Of course, we can add more params to paths.

`/pages/products/123?size=XL`

The result is `{"id": 123, "size": "XL"}`

But avoid the case of overriding URL parameters.

`/pages/products/123?id=apple-juice`
The obtained result is `{"id": "apple-juice"}`

Take all params of paths with `(...)`
`/pages/products/[...]`

Retrieves all routes with double brackets `([[... product]])`.
`/pages/products/[[[...]]]`

The result `/pages/products/apple-juice/12`.

This way the router will match the routes without params.


** Note that **
- Nextjs favors routers with predefined dynamic routes like `products/create.js` over `/products/123`.
- Static pages will be Automatic Static Optimization - meaning the page loads a method in rendering that allows the page to render without data, for these pages the query object is empty.