Ha Tuan Em

Posted on Jan 21, 2021

Next.JS ON MY OWN.

#nextjs #javascript #node

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.

<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 pages is the root directory for path, so any page and URL will be generated in there.
And the folders or files inside the pages folder are generated URL or route in the NEXT application.
Example:

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.

DEV Community