Erste Schritte mit nextjs

Umgebungsvorbereitung

// 全局安装next
npm install -g create-next-app

// 创建项目
create-next-app next_demo

// 启动项目
npm run dev

// 打包
yarn build

// 运行打包后的程序
yarn start

Einstieg

Next.js folgt dem Designprinzip „Konvention über Konfiguration“. Gemäß der „Konvention“ entspricht jede Datei in Seiten einer Webseitendatei, und der Dateiname entspricht dem Pfadnamen der Webseite, z. B. Seiten/ home. Die js-Datei entspricht der Seite des /home-Pfads. Seiten/index.js ist natürlich etwas Besonderes und entspricht der Seite des Standard-Root-Pfads /.

Seite erstellen

Erstellen Sie eine neue about.js-Datei unter Seiten

// 注意大小括号之分
const About = () => (
  <div>
    <p>我是about</p>
  </div>
)
export default About;

Seite springen

Verwenden Sie LInk-Komponenten, z. B. das Springen von index zu about

// index.js

import Link from 'next/link'

<Link href="/about">
  <a>去about页面</a>
</Link>

Grube

● local kann nicht verwendet werden
● scss wird für style verwendet, da less dies nicht mehr unterstützt

Styling-Probleme - scss

Unterstützen Sie die Verwendung von scss
zum Installieren von npm, installieren Sie zuerst sass und konfigurieren Sie es dann

// file(next.config.js)
const path = require('path')
module.exports = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Wird auf der Seite verwendet, z. B. als Kopfzeile

// scss
.header_wrap{
  padding: 20rpx;
  background: #eee;
  padding: 20px;
  .nav{
    margin: 10px;
  }
}

// html
import style from './header.module.scss'

<div className={style.header_wrap}>
  <Link href="/about">
    <a className={style.nav} title="woshi">去about页面</a>
  </Link>
</div>

Routing

Nextjs empfiehlt offiziell zwei Jump-Methoden, eine ist Link-Component-Wrapping, die andere verwendet Router,

Router

Router.push('url')

import React from 'react'     
import Router from 'next/router'

export default () => {
    return(
        <>
            <button onClick={()=>Router.push('/demo')} >送我去demo页</button>
            <div>这里是主页</div>
        </>
    )
}

Routing-Parameter

Notiz! Notiz! Nextjs kann keine Parameter verwenden, um Parameter zu übergeben! Nur durch Abfrage!

Router.push('url?id=1')
等价
Router.push({
    pathname:'url',
    query:{id:1}
})

Routenparameter

Wenn beim Rendern des Servers kein Fensterobjekt vorhanden ist, ist es natürlich, dass der URL-Parameter nicht auf herkömmliche Weise abgerufen werden kann. Hier wird ein withRouter-Objekt in „next/router“ bereitgestellt. Nachdem die Komponente damit umschlossen wurde, wird die Komponente dies tun haben weitere Router-Parameter, die über den router.query-Parameter abgerufen werden können

import React from 'react'
import Router,{ withRouter } from 'next/router'

const Demo = (props) => {
    return(
        <>
            <button onClick={()=>Router.push('/')} >送我去主页</button>
            <div>这里是demo页</div>
        		// 路由取参
            <div>{props.router.query.id}</div>
        </>
    )
}
export default withRouter(Demo);

Aufsatz

● Beim Aktualisieren werden http-Informationen auf dem Server gedruckt.
● Nach dem Springen werden http-Informationen auf dem Client gedruckt

Kalte Wissenserklärung

getInitialProps

1. Ausführungszeitpunkt. getInitialProps wird nur serverseitig geladen, wenn die Seite erstmalig geladen wird. Nur wenn die Route springt (Link-Komponentensprünge oder API-Methodensprünge), führt der Client getInitialProps aus.
2. Stellen Sie sicher, dass getInitialProps normale Objekte zurückgibt. Wenn der Dienst gerendert wird, serialisiert getInitialProps die Daten (ähnlich wie JSON.stringify), und wenn Map, Set und andere Typen nicht serialisiert werden können, wird ein Fehler gemeldet.
3. Funktionen können nur in Seitenkomponenten im Seitenverzeichnis verwendet werden, nicht in Komponenten in Nichtseitenverzeichnissen.
4. Funktionsstandort. Für die Funktionskomponente muss getInitialProps außerhalb der Funktionskomponente definiert werden (dies ist das Beispiel), damit die Daten an die Parameter der Funktionskomponente übergeben werden können. Für Klassenkomponenten (Klassenkomponenten) muss die Funktion eine statische Methode deklarieren und innerhalb der Klassenkomponente platziert werden. Siehe das offizielle Website-Beispiel:

 import React from 'react'
   
   export default class extends React.Component {
     static async getInitialProps({ req }) {
       const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
       return { userAgent }
     }
   
     render() {
       return (
         <div>
           Hello World {this.props.userAgent}
         </div>
       )
     }
   }

Gleichzeitig stellt die getInitialProps-Funktion selbst auch einige Parameter bereit, die es uns ermöglichen, direkt zugehörige Informationen wie Routen und Anforderungen zu erhalten.
● pathname – der Pfadteil der URL
● query – der Abfrageteil der URL und wird in ein Objekt geparst
● asPath – der tatsächliche Pfad, der im Browser angezeigt wird (einschließlich des Abfrageteils), vom Typ String
● req – das HTTP Request-Objekt (nur serverseitig Ja)
● res – HTTP-Rückgabeobjekt (nur serverseitig)
● jsonPageRes – Datenantwortobjekt abrufen (nur clientseitig)
● err – Fehler beim Rendern

Nun, ich werde das heute zuerst schreiben