配置一个nextjs_react项目

Posted 2022-12-11 友人A ㅤ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了配置一个nextjs_react项目相关的知识，希望对你有一定的参考价值。

1. 建立项目

安装 create-next-app 脚手架

npm i -g create-next-app

用脚手架简历next项目

create-next-app nextjs_react

创建完成后项目目录

├─ /.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

2. 更改项目目录结构

根目录下新增 src 目录
把 pages 目录放到 src 目录里
在 src 目录下新建 common 目录
将 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）

3. 配置项目

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

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

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

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')],
  ,

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);
            
        );
    );

解决跨域问题：

安装插件：
npm i express http-proxy-middleware
在项目根目录中新建 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')
    )

修改package.json

"scripts": 
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js",
  "lint": "next lint"
,

参考文章

以上是关于配置一个nextjs_react项目的主要内容，如果未能解决你的问题，请参考以下文章

tomcat配置项目部署只能配置一个?

IntelliJ IDEA配置Web项目

Cocoapods 警告 - CocoaPods 没有设置您项目的基本配置，因为您的项目已经有一个自定义配置集

resin 4.0 项目的配置

SpringBoot项目优雅的实现多配置文件切换以及获取配置信息