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入门使用教程的文章就介绍到这了,更多相关Next.js入门内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！