Next.js的使用教程

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

目錄

• 簡介

• 創建Next.js項目
  

• 手動創建Next.js項目

• creact-next-app快速創建項目
  

• Pages
  

• 路由
  

• Link
  

• Router
  

• 參數傳遞與接收
  

• 動態路由
  

• 鉤子事件
  

• 獲取數據
  

• getStaticProps
  

• 構建時請求數據
  

• getServerSideProps
  

• 每次訪問時請求數據
  

• CSS支持
  

• 添加全局樣式表
  

• 添加組件級CSS

簡介

Next.js 是一個輕量級的 React 服務端渲染應用框架。

官網鏈接：www.nextjs.cn/

優點：

零配置
自動編譯并打包。從一開始就為生產環境而優化。

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

增量靜態生成
在構建之后以增量的方式添加并更新靜態預渲染的頁面。

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

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

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

API 路由
創建 API 端點（可選）以提供后端功能。

內置支持CSS
使用 CSS 模塊創建組件級的樣式。內置對 Sass 的支持。

代碼拆分和打包
采用由 Google Chrome 小組創建的、并經過優化的打包和拆分算法。

創建Next.js項目

手動創建Next.js項目

mkdir nextDemo  //創建項目
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"
  },

創建pages文件夾和文件

在項目根目錄創建pages文件夾并在pages文件夾中創建index.js文件

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

運行項目

npm run dev

creact-next-app快速創建項目

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

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

目錄結構介紹：

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

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

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

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

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

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

Pages

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

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

路由

頁面跳轉一般有兩種形式，第一種是利用標簽<Link>,第二種是用js編程的方式進行跳轉，也就是利用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>標簽進行跳轉是非常容易的，但是又一個小坑需要你注意一下，就是他不支持兄弟標簽并列的情況。

 //錯誤寫法
 <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>

參數傳遞與接收

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

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>

動態路由

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

鉤子事件

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

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

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

//瀏覽器 history觸發前
Router.events.on('beforeHistoryChange',(...args)=>{
    console.log('3,beforeHistoryChange->在改變瀏覽器 history之前觸發,參數為:',...args)
})

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

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

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

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

獲取數據

getStaticProps

構建時請求數據

在build階段將頁面構建成靜態的html文件，這樣線上直接訪問HTML文件，性能極高。

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

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

每次訪問時請求數據

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

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

• 如果頁面通過瀏覽器端Link組件導航而來，Next會向服務端發一個請求，然后在服務端運行getServerSideProps方法，然后返回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支持

添加全局樣式表

要將樣式表添加到您的應用程序中，請在 pages/_app.js 文件中導入（import）CSS 文件。
在生產環境中，所有 CSS 文件將自動合并為一個經過精簡的 .css 文件。
你應該 只在 pages/_app.js 文件中導入（import）樣式表。
從 Next.js 9.5.4 版本開始，你可以在應用程序中的任何位置從 node_modules 目錄導入（import） CSS 文件了。
對于導入第三方組件所需的 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 允許你導入（import）具有 .scss 和 .sass 擴展名的 Sass 文件。 你可以通過 CSS 模塊以及 .module.scss 或 .module.sass 擴展名來使用組件及的 Sass

npm i sass --save

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

const path = require('path')

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

CSS-in-JS

可以使用任何現有的 CSS-in-JS 解決方案。 最簡單的一種是內聯樣式：

<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>技術胖是最胖的！</title>
    <meta charSet='utf-8' />
</Head>

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