DEV Community

loading...
Cover image for Next.JS ON MY OWN.

Next.JS ON MY OWN.

hte305 profile image Ha Tuan Em ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide