Next.js入門使用教程

簡介

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檔案：定義了專案所需要的檔案和專案的配置資訊（名稱、版本和許可證），最主要的是使用www.cppcns.comnpm 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)=>{
    consolwww.cppcns.come.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入門使用教程的文章就介紹到這了,更多相關Next.js入門內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！