Static files like images can be handled using next/image, Next.js also has support for Image Optimization by default This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
Next also has its own Head component which allows setting a title of the page that can be accessed as a route later, another metadata that can be added to the head is the next/script wich comes with several options like strategy, in case strategy is set to lazyonload, Next.js will load this particular script lazily during browser idle time
Rgarding Styling, next allowas the use of regular CSS files, the name of which must end with .module.css, to use the file within a component, import the moddule.css then inside the element tage use className = style.<class name from the imported module>, for global styling import the global.css to _App.js file, in global.css put the styles that you want to be global.
React context lets you easily share state in your applications, you can think of React context as the equivalent of global variables for our React components. It becomes really useful when you want to pass data to child components without the need to pass it to all ancestors
The Steps