Next.js的使用教程

本篇內(nèi)容主要講解“Next.js的使用教程”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Next.js的使用教程”吧!

目錄

• 簡介

• 創(chuàng)建Next.js項目
  

• 手動創(chuàng)建Next.js項目

• creact-next-app快速創(chuàng)建項目
  

• Pages
  

• 路由
  

• Link
  

• Router
  

• 參數(shù)傳遞與接收
  

• 動態(tài)路由
  

• 鉤子事件
  

• 獲取數(shù)據(jù)
  

• getStaticProps
  

• 構(gòu)建時請求數(shù)據(jù)
  

• getServerSideProps
  

• 每次訪問時請求數(shù)據(jù)
  

• CSS支持
  

• 添加全局樣式表
  

• 添加組件級CSS

簡介

Next.js 是一個輕量級的 React 服務(wù)端渲染應(yīng)用框架。

官網(wǎng)鏈接：www.nextjs.cn/

優(yōu)點：

零配置
自動編譯并打包。從一開始就為生產(chǎn)環(huán)境而優(yōu)化。

混合模式： SSG 和 SSR
在一個項目中同時支持構(gòu)建時預(yù)渲染頁面（SSG）和請求時渲染頁面（SSR）

增量靜態(tài)生成
在構(gòu)建之后以增量的方式添加并更新靜態(tài)預(yù)渲染的頁面。

支持 TypeScript
自動配置并編譯 TypeScript。

快速刷新
快速、可靠的實時編輯體驗，已在 Facebook 級別的應(yīng)用上規(guī)模上得到驗證。

基于文件系統(tǒng)的路由
每個 pages 目錄下的組件都是一條路由。

API 路由
創(chuàng)建 API 端點（可選）以提供后端功能。

內(nèi)置支持CSS
使用 CSS 模塊創(chuàng)建組件級的樣式。內(nèi)置對 Sass 的支持。

代碼拆分和打包
采用由 Google Chrome 小組創(chuàng)建的、并經(jīng)過優(yōu)化的打包和拆分算法。

創(chuàng)建Next.js項目

手動創(chuàng)建Next.js項目

mkdir nextDemo  //創(chuàng)建項目
npm init            //初始化項目
npm i react react-dom next --save           //添加依賴

在package.json中添加快捷鍵命令

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

創(chuàng)建pages文件夾和文件

在項目根目錄創(chuàng)建pages文件夾并在pages文件夾中創(chuàng)建index.js文件

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

運行項目

npm run dev

creact-next-app快速創(chuàng)建項目

create-next-app可以快速的創(chuàng)建Next.js項目，它就是一個腳手架。

npm install -g create-next-app  //全局安裝腳手架
create-next-app nextDemo  //基于腳手架創(chuàng)建項目
cd nextDemo
npm run dev  //運行項目

目錄結(jié)構(gòu)介紹：

• components文件夾: 這里是專門放置自己寫的組件的，這里的組件不包括頁面，指公用的或者有專門用途的組件。

• node_modules文件夾：Next項目的所有依賴包都在這里，一般我們不會修改和編輯這里的內(nèi)容。

• pages文件夾：這里是放置頁面的，這里邊的內(nèi)容會自動生成路由，并在服務(wù)器端渲染，渲染好后進行數(shù)據(jù)同步。

• static文件夾： 這個是靜態(tài)文件夾，比如項目需要的圖片、圖標和靜態(tài)資源都可以放到這里。

• .gitignore文件： 這個主要是控制git提交和上傳文件的，簡稱就是忽略提交。

• package.json文件：定義了項目所需要的文件和項目的配置信息（名稱、版本和許可證），最主要的是使用npm install 就可以下載項目所需要的所有包。

Pages

在 Next.js 中，一個 page（頁面） 就是一個從 .js、jsx、.ts 或 .tsx 文件導(dǎo)出（export）的React 組件 ，這些文件存放在 pages 目錄下。每個 page（頁面）都使用其文件名作為路由（route）。

如果你創(chuàng)建了一個命名為 pages/about.js 的文件并導(dǎo)出（export）一個如下所示的 React 組件，則可以通過 /about 路徑進行訪問。

路由

頁面跳轉(zhuǎn)一般有兩種形式，第一種是利用標簽<Link>,第二種是用js編程的方式進行跳轉(zhuǎn)，也就是利用Router組件

Link

import React from 'react'
import Link from 'next/link'
const Home = () => (
  <>
    <div>我是首頁</div>
    <div><Link href="/pageA" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><a>去A頁面</a></Link></div>
    <div><Link href="/pageB" rel="external nofollow" ><a>去B頁面</a></Link></div>

  </>
)

export default Home

注意：用<Link>標簽進行跳轉(zhuǎn)是非常容易的，但是又一個小坑需要你注意一下，就是他不支持兄弟標簽并列的情況。

 //錯誤寫法
 <div>
  <Link href="/pageA" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <span>去A頁面</span>
    <span>前端博客</span>
  </Link>
</div>

//正確寫法
<Link href="/pageA" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
  <a>
    <span>去A頁面</span>
    <span>前端博客</span>
  </a>
</Link>

Router

import Router from 'next/router'

<button onClick={()=>{Router.push('/pageA')}}>去A頁面</button>

參數(shù)傳遞與接收

在Next.js中只能通過通過query（?id=1）來傳遞參數(shù)，而不能通過(path:id)的形式傳遞參數(shù)。

import Link from 'next/link'

//傳遞
<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>返回首頁</a></Link>
        </>
    )
}
//withRouter是Next.js框架的高級組件，用來處理路由用的
export default withRouter(BlogDetail)


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

<button onClick={gotoBlogDetail} >博客詳情</button>

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

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

<Link href={{pathname:'/blogDetail',query:{bid:23}}><a>博客詳情</a></Link>

動態(tài)路由

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" }

鉤子事件

利用鉤子事件是可以作很多事情的，比如轉(zhuǎn)換時的加載動畫，關(guān)掉頁面的一些資源計數(shù)器.....

//路由發(fā)生變化時
Router.events.on('routeChangeStart',(...args)=>{
    console.log('1.routeChangeStart->路由開始變化,參數(shù)為:',...args)
})

//路由結(jié)束變化時
Router.events.on('routeChangeComplete',(...args)=>{
    console.log('routeChangeComplete->路由結(jié)束變化,參數(shù)為:',...args)
})

//瀏覽器 history觸發(fā)前
Router.events.on('beforeHistoryChange',(...args)=>{
    console.log('3,beforeHistoryChange->在改變?yōu)g覽器 history之前觸發(fā),參數(shù)為:',...args)
})

//路由跳轉(zhuǎn)發(fā)生錯誤時
Router.events.on('routeChangeError',(...args)=>{
    console.log('4,routeChangeError->跳轉(zhuǎn)發(fā)生錯誤,參數(shù)為:',...args)
})

/****************************hash路由***********************************/

Router.events.on('hashChangeStart',(...args)=>{
    console.log('5,hashChangeStart->hash跳轉(zhuǎn)開始時執(zhí)行,參數(shù)為:',...args)
})

Router.events.on('hashChangeComplete',(...args)=>{
    console.log('6,hashChangeComplete->hash跳轉(zhuǎn)完成時,參數(shù)為:',...args)
})

獲取數(shù)據(jù)

getStaticProps

構(gòu)建時請求數(shù)據(jù)

在build階段將頁面構(gòu)建成靜態(tài)的html文件，這樣線上直接訪問HTML文件，性能極高。

使用getStaticProps方法在build階段返回頁面所需的數(shù)據(jù)。
如果是動態(tài)路由的頁面，使用getStaticPaths方法來返回所有的路由參數(shù)，以及是否需要回落機制。

// 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

getServerSideProps

每次訪問時請求數(shù)據(jù)

頁面中export一個async的getServerSideProps方法，next就會在每次請求時候在服務(wù)端調(diào)用這個方法。

• 方法只會在服務(wù)端運行，每次請求都運行一邊getServerSideProps方法

• 如果頁面通過瀏覽器端Link組件導(dǎo)航而來，Next會向服務(wù)端發(fā)一個請求，然后在服務(wù)端運行g(shù)etServerSideProps方法，然后返回JSON到瀏覽器。

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

CSS支持

添加全局樣式表

要將樣式表添加到您的應(yīng)用程序中，請在 pages/_app.js 文件中導(dǎo)入（import）CSS 文件。
在生產(chǎn)環(huán)境中，所有 CSS 文件將自動合并為一個經(jīng)過精簡的 .css 文件。
你應(yīng)該 只在 pages/_app.js 文件中導(dǎo)入（import）樣式表。
從 Next.js 9.5.4 版本開始，你可以在應(yīng)用程序中的任何位置從 node_modules 目錄導(dǎo)入（import） CSS 文件了。
對于導(dǎo)入第三方組件所需的 CSS，可以在組件中進行。

添加組件級CSS

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

//修改第三方樣式
.loginDiv :global(.active){
    color:rgb(30, 144, 255) !important;
}

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

Next.js 允許你導(dǎo)入（import）具有 .scss 和 .sass 擴展名的 Sass 文件。 你可以通過 CSS 模塊以及 .module.scss 或 .module.sass 擴展名來使用組件及的 Sass

npm i sass --save

如果要配置 Sass 編譯器，可以使用 next.config.js 文件中的 sassOptions 參數(shù)進行配置。

const path = require('path')

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

CSS-in-JS

可以使用任何現(xiàn)有的 CSS-in-JS 解決方案。 最簡單的一種是內(nèi)聯(lián)樣式：

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

使用 styled-jsx 的組件就像這樣

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

自定義Header

<Head>
    <title>技術(shù)胖是最胖的！</title>
    <meta charSet='utf-8' />
</Head>

到此，相信大家對“Next.js的使用教程”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！