Next .Js Basic Features Blog
Pages: In Next. js, a page is a React Component exported from a file in the pages directory. Pages are associated with a route based on their file name and react component is exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is also associated with a route based on its file name.Otherwise By defaultly, Next.js pre-renders every page. This stands that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
Next.js has two forms of pre-rendering there are also 1.Static Generation
and 2.Server-side Rendering. The difference is in when it generates the HTML for a page .there are:
Static Generation: The HTML is generated at build time and will be reused on each request.
server-side-rendering: The HTML is generated on each request.
Built-in CSS Support :Next.js allows importing CSS files from a JavaScript file.And This is possible because Next.js extends the concept of import beyond JavaScript.
Adding a global stylesheet :To add a stylesheet to application, import the CSS file within pages/_app.js.
Import styles from node_modules: Importing a CSS file from node_modules is permitted anywhere in application since as next.js 9.5.4
Layouts:Next js Layout functionality helps to organize code on one component. Next js provides a custom app component. Custom app component renders on every page. When page routes hit new routes, the custom app component renders and afterload another component on-page.
The React mode also allows us to deconstruct a page into a series of components. Many of these components are often reused between pages.
Image Optimization and image component: The Next.js Image component, next/images, is an extension of the HTML <img> element, evolved for the modern web. It includes a variety of built-in performance optimizations to help achieve good core web vitals . These scores are an important measurement of user experience on a website, and are factored into google search rankings .
Some of the optimizations built into the Image component include:
Recommended by LinkedIn
Font Optimization: By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations. This results in improvements to First contentful paint FCP and Largest contentful paint (LCP).
Static File Serving:Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/). if you add an image to public/me.png, the following next js code formula
Fast Refresh: Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.
TypeScript: Next.js provides an integrated TypeScript experience out of the box, similar to an IDE.Next. js has really good support for TypeScript and is easy to set up. That makes it simple to build strongly typed React apps with Next. js and TypeScript that run on either the client or the server.
Environment Variables: Next js comes with built-in support for environment variables, which allows you to do the following: Use env. local to load environment variables. Expose environment variables to the browser by prefixing with NEXT_PUBLIC
Next.js has built-in support for loading environment variables from .env.local into process.env.
An example .env.local are also:
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword