Next.js Getting Started Tutorial

mkdir nextDemo //Create a project npm init //Initialize the project npm i react react-dom next --save //Add dependencies

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" : "next" ,
    "build" : " next build",
    "start" : "next start"
  },

function Index(){
    return (
        <div>Hello Next.js</div>
    )
}
export default Index

npm run dev

npm install -g create-next-app //Global installation of scaffolding create-next-app nextDemo //Create a project based on scaffolding cd nextDemo
npm run dev //Run the project

import React from 'react'
import Link from 'next/link'
const Home = () => (
  <>
    <div>I am the home page</div>
    <div><Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><a>Go to page A</a></Link></div>
    <div><Link href="/pageB" rel="external nofollow" ><a>Go to page B</a></Link></div>

  </>
)

export default Home

 //Wrong way to write <div>
  <Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <span>Go to page A</span>
    <span>Front-end blog</span>
  </Link>
</div>

//Correct writing <Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <a>
    <span>Go to page A</span>
    <span>Front-end blog</span>
  </a>
</Link>

import Router from 'next/router'

<button onClick={()=>{Router.push('/pageA')}}>Go to page A</button>

import Link from 'next/link'

//Pass <Link href="/blogDetail?bid=23" rel="external nofollow" ><a>{blog.title}</a></Link>

    
    
//blog.js
import { withRouter} from 'next/router'
import Link from 'next/link'

const BlogDetail = ({router})=>{
    return (
        <>
            <div>blog id: {router.query.name}</div>
            <Link href="/" rel="external nofollow" ><a>Return to Home Page</a></Link>
        </>
    )
}
//withRouter is an advanced component of the Next.js framework, used to handle routing export default withRouter(BlogDetail)


/****************************************************************************************/
import Router from 'next/router'

<button onClick={gotoBlogDetail} >Blog details</button>

function gotoBlogDetail(){
    Router.push('/blogDetail?bid=23')
}

//object form function gotoBlogDetail(){
    Router.push({
        pathname:"/blogDetail",
        query:{
            bid:23
        }
    })
}

<Link href={{pathname:'/blogDetail',query:{bid:23}}><a>Blog Details</a></Link>

pages/post/[pid].js
route : /post/abc --> query : { "pid": "abc" }


pages/post/[pid]/[comment].js
route : /post/abc/a-comment --> query : { "pid": "abc", "comment": "a-comment" }

//When the route changes, Router.events.on('routeChangeStart',(...args)=>{
    console.log('1.routeChangeStart->Route starts changing, parameters are:',...args)
})

//When the route changes, Router.events.on('routeChangeComplete',(...args)=>{
    console.log('routeChangeComplete->Route change completed, parameters:',...args)
})

//Browser history before triggering Router.events.on('beforeHistoryChange',(...args)=>{
    console.log('3, beforeHistoryChange-> Triggered before changing the browser history, parameters:',...args)
})

//When an error occurs in the route jump, Router.events.on('routeChangeError',(...args)=>{
    console.log('4, routeChangeError-> Redirect error, parameter:',...args)
})

/********************************hash route***********************************/

Router.events.on('hashChangeStart',(...args)=>{
    console.log('5, hashChangeStart->hash is executed when the jump starts, the parameters are:',...args)
})

Router.events.on('hashChangeComplete',(...args)=>{
    console.log('6, hashChangeComplete->hash jump completed, the parameters are:',...args)
})

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.
export async function getStaticProps(context) {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps(context) {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

[name].module.css
//login.module.css
.loginDiv{
    color: red;
}

//Modify third-party style.loginDiv:global(.active){
    color:rgb(30, 144, 255) !important;
}

import styles from './login.module.css'
<div className={styles.loginDiv}/>

npm i sass --save

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

<p style={{ color: 'red' }}>hi there</p>

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

<Head>
    <title>Technical fat people are the fattest! </title>
    <meta charSet='utf-8' />
</Head>