• 配置一个nextjs_react项目

    1. 建立项目

    安装 create-next-app 脚手架

    npm i -g create-next-app

    • 1

    用脚手架简历next项目

    create-next-app nextjs_react

    • 1

    创建完成后项目目录

    ├─ /.next              <-- 用于SSR运行的工程，执行yarn dev或yarn build后才会出现
├─ /node_modules
├─ /pages              <-- Next.js指定的页面目录
|  ├─ /api             <-- Next.js指定的API服务目录，可以删除
|  |  └─ hello.js      <-- API服务的hello接口
|  ├─ _app.js          <-- Next.js指定的项目入口文件
|  └─ index.js         <-- 项目首页
├─ /public             <-- 静态目录，放在这里的文件可通过"/"直接访问（没有public这一层级）
|  ├─ favicon.ico
|  └─ vercel.svg
├─ /styles             <-- 项目全局样式
|  ├─ globals.css
|  └─ Home.module.css  <-- Home组件样式
├─ .eslintrc.json
├─ .gitignore
├─ next.config.js      <-- Next.js配置文件
├─ package.json
├─ README.md
└─ yarn.lock

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    2. 更改项目目录结构

    1. 根目录下新增 src 目录
    2. 把 pages 目录放到 src 目录里
    3. 在 src 目录下新建 common 目录
    4. 将 styles 目录放到 common 目录下

    最终初始目录结构如下：

    /src
├─ /common            <-- 公用目录
|  ├─ /images         <-- 公用图片目录
|  └─ /styles         <-- 公用样式目录
├─ /components		  <-- 公用组件目录
└─ /pages             <-- Next.js指定的页面目录
   ├─ /api            <-- Next.js指定的API服务目录（不会生成api页面目录）
   ├─ _app.js         <-- Next.js指定的项目入口文件（不会生成_app.html）
   └─ index.js        <-- index页面（会生成index.html）

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    3. 配置项目

    在tsconfig.json文件中添加如下配置：

    "compilerOptions": {
    "baseUrl": ".",
    "paths": {
        "@/*": [
            "src/*"
        ]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在src/pages/_app.js修改页面title：

    import '@/common/styles/globals.scss'
import type { AppProps } from 'next/app'
import Head from 'next/head'

export default function App ({ Component, pageProps }: AppProps) {
    return (
        <>
            <Head>
                <title>nextjs_react</title>
            </Head>
            <Component {...pageProps} />
        </>
    )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    4. 集成Sass/Scss

    安装sass

    npm i sass --save

    nextjs有内置sass，在配置next.config,js里面打开

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    5. 配置axios

    安装axios：

    npm i axios --save

    在src目录下新建utils/axios.ts：

    import axios from 'axios'
import qs from "qs"

axios.defaults.timeout = 30000
axios.defaults.withCredentials = true // 跨域设置
axios.defaults.baseURL = ''

const cancelArr: Array<any> = [];
export { cancelArr }

// 请求拦截器
axios.interceptors.request.use(
    (config: any) => {
        // 一些请求拦截操作
        
        return config;
    },
    (error: any) => {
        return Promise.reject(error);
    }
)

// 响应拦截器
axios.interceptors.response.use(
    (response: any) => {
        return response
    },
    (error: any) => {
        return Promise.reject(error)
    }
)

export default axios

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post (url: string, data = {}, responseType: any) {
    return new Promise((resolve, reject) => {
        axios.post(url, data, {
            responseType,
            cancelToken: new axios.CancelToken(function executor (cancel) {
                cancelArr.push({
                    cancel
                })
            })
        }).then(
            response => {
                if (response) {
                    resolve(response.data);
                } else {
                    console.log("取消了")
                }
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * get 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get (url: string, data = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82

    解决跨域问题：

    1. 安装插件：
      npm i express http-proxy-middleware

    2. 在项目根目录中新建 server.js

    const express = require('express')
const next = require('next')
const { createProxyMiddleware } = require('http-proxy-middleware')

// 配置代理
const devProxy = {
    '/api': {
        target: 'http://192.168.xx.xx:8000', // 端口自己配置合适的
        pathRewrite: {
            '^/api': '/api'
        },
        changeOrigin: true
    }
}

// 运行端口
const port = parseInt(process.env.PORT, 10) || 3000
// 判断是否为开发环境
const dev = process.env.NODE_ENV !== 'production'
// 初始化app
const app = next({
    dev
})
const handle = app.getRequestHandler()

app.prepare()
    .then(() => {
        const server = express()

        // 开发环境下使用代理接口
        if (dev && devProxy) {
            Object.keys(devProxy).forEach(function (context) {
                server.use(createProxyMiddleware(context, devProxy[context]))
            })
        }

        server.all('*', (req, res) => {
            return handle(req, res)
        })

        server.listen(port, err => {
            if (err) {
                throw err
            }
            console.log(`> Ready on http://localhost:${port}`)
        })
    })
    .catch(err => {
        console.log(err, 'error')
    })


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    1. 修改package.json
    "scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js",
  "lint": "next lint"
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    参考文章

  • 相关阅读:
    大新闻｜高通将为Meta定制VR芯片，Quest端Beat Saber售出650万份
    【面试常见问题】深拷贝与浅拷贝
    Kafka高性能
    C++学习笔记（1）--- 常量、数据类型、运算符
    电脑C盘空间不足，突然变红，请检查AppData\Roaming
    TinyBERT 数据增强
    Jmeter实战 | 同用户重复并发多次抢红包
    如何把A3 pdf 文章打印成A4
    Nacos配置中心HelloWorld入门实例
    【python】内置库函数大集合 ❢ 这不得点赞收藏一波~
  • 原文地址：https://blog.csdn.net/qq_46025031/article/details/127917773