Next.js入門使用教程

Posted on by

簡介

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入門使用教程的文章就介紹到這瞭,更多相關Next.js入門內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：