Create the Next. Js project

Globally install create-next-app scaffolding

npm i -g create-next-app
Copy the code

Create the project my-Next

npx create-next-app my-next
Copy the code

After the installation is complete, run the project as prompted and run the NPM run dev command

Project Structure Introduction

The following describes the files and folders used

  • Components folder: Used to place self-written components, mainly public components and specialized components
  • Pages folder: Places pages for browser display. The contents of this folder are automatically routed and rendered on the server
  • Static folder: Static folders, such as project images, ICONS, and static resources

Next. Js Page use

How to create a page

Under the pages folder, create a new index, js file and path for http://localhost:3000/index at this time, the code is as follows:

// pages/index.js
function Index() {
    return (<div>Home page</div>)}export default Index
Copy the code

Can also create a folder in the pages, so the corresponding path will change accordingly, create a folder article, and create a new file. The add js, path for http://localhost:3000/article/add at this time

// pages/article/add.js
function AddArticle() {
    return (<div>Add a page</div>)}export default AddArticle
Copy the code

Next. Js Components use

Create a new file, such as header.js, directly in the Components folder

// components/header.js
function Header(props) {
    return (<div>
        Header
        <p>{props.children}</p>
    </div>)}export default Header
Copy the code

Used in index.js in Pages

import Header from '.. /components/header.js' ... <Header> Home </Header>...Copy the code

Next. Js route jump and parameter pass

There is no need to configure routes in next.js, but we need to do route jumps and parameter passes

In Next. Js, page bars are divided into two forms. The first one uses the tag , and the second one programmatically jumps to the Router

  • Tabbed navigation

    Note: There can only be one root tag in a Link tag

    // pages/index.js
import Link from 'next/link' // Get the link tag in next
function Index() {
return (<div>Home // Visit the Add Article page<Link href="/article/add">
        <a>
            <span>Add the article</span>
            <span>.</span>
        </a>
    </Link>
</div>)}export default Index
Copy the code

  • Programmatic navigation Router

    The code has low coupling and is easy to call multiple times

    // pages/article/add/.js
import Router from 'next/router' // Get the router in next
function AddArticle() {
    const gotoIndex = (a)= > {
            Router.push('/index')}return (<div>Add page // Plan 1<button 
            onClick={()= >{router.push ('/index')}} > Return to the home page</button>/ / 2<button onClick={gotoIndex}>Return to the home page</button>
    </div>)}export default AddArticle
Copy the code

You can only use Query to pass and retrieve parameters in next.js

  • Only query can be used to pass parameters

    In next.js, only query(? Id =1) or query:{name:’ tie ‘} to pass the parameter

    // pages/index.js ... Const gotoList = () => {router.push ({pathName: '/article/list', query: {name: 'react'}})} <div> // pass parameters // 1.? name=react <Link href="/article/list? name=react"> <a>react-1</a> </Link> // 2. {pathname: '/... ', query: {name: 'react'}} <Link href={{pathname: '/article/list', query: {name: 'react'}}} ><a>react-1</a></Link> // 3. <button onClick={gotoList}>react-1</button> </div>... // pages/article/list.js ... < h2 > < div > / / receiving parameters {props. The router. The query. The name} < / h2 > < / div >Copy the code

Get the remote data using getInitialProps

In Next. Js it is recommended to use getInitialProps to get the remote data

// pages/index.js
function Index(props) {
    // The data obtained in getInitialProps is mapped to props
    return (<div>Home page</div>)
}
Index.getInitialProps = async() = > {const promise = new Promise((resolve) = > {
        axios({
            method: ' '.url: 'http://123... '. }).then(res= > {
            resolve(res)
        )
    })
    return await promise
}
export default Index
Copy the code

Lazy loading in next.js

There are two types of lazy loading:

  1. Lazy loading of dependency packages

    For example, use dayJS, a dependency package for processing time, and implement lazy loading with async and await

    // pages/time.js
import React, {useState} from 'react'
function Time() {
    const [nowTime, setNowTime] = useState(Date.now())
    const formatTime = asunc () => {
        const dayjs = await import ('dayjs') 
        setNowTime(dayjs.default(Date.now()).format())
    }
    return (
        <>
            <div>Current time: {nowTime}</div>
            <div>
                <button 
                    onClick={formatTime}
                >Modify the time format</button>
            </div>
        </>
    )
}
export default Time
Copy the code

  2. Lazy loading of custom components

    Mainly used for lazy loading of components in components, with the help of Dynamic implementation

    // pages/index.js
import React, {useState} from 'react'
import dynamic from 'next/dynamic'
const Lazy = dynamic(import ('.. /components/lazy.js'))

function Index() {
    // ...
    return (<div>
        <Lazy />
    </div>)}export default Index
Copy the code