Next Js - Javascript

• Topics
  • Basic
  • CSS
• Commands
• Theory

Topics

Basic

• Next JS Components
  • import Head from next/head
  • import Image from next/image
  • import Script from next/script
  • import Link from next/link
• _app.js
  • First this is Fired, every time a page reloads
• pre-rendering
  • Static Site Generators
    • getStaticProps()
    • getStaticPaths()
  • Server Side Rendering (SSR)
    • getServerSideProps()

CSS

• import styles from "./FileName.module.css"
  • CSS gets imported as an Object and respective styles can be used for that element using className = {styles.className}
• import "./filename.css" => Use this in _app.js, Normal method to import CSS file as Global style sheet
  • Importing CSS for a particular file is only permitted for Node modules
• Styled JSX
  • Declare inside return, Scope is inside that component

        <style jsx>
            {`
                selector {
                    property: value;
                }
            `}
        </style>
    

  • <style jsx global> => Styles became global wherever the component is imported

Commands

• Basic
  • npm install --global yarn => Install Yarn globally
  • yarn create next-app
  • yarn dev

Theory

• It is a React Front-end Development web framework created by Vercel that enables functionality such as Server-side rendering and Static-site generation
• Server-Side rendering => It allows the first page load to be rendered by the server, which is great for SEO & Performance
• Easy Page Routing
• API Routes
• Typescript & Sass
• Deployment