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 aconfig
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 intoprocess.env
of NODEJS. - It's provider the different environment variable withNEXT_prefix
.
Fast refresh - I think anyone can know it.
Routing
- By
pages
is the root directory forpath
, 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 useuseRouter
orwithRouter
, the page use usuallyuseRouter
.
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.
Top comments (0)