1:创建项目安装官网步骤
npx create-next-app@latest
2:修改next.config.mjs配置文件
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
basePath: '/test',
};
export default nextConfig;
3:修改package.json配置文件
{
"name": "uniweb-payment-link-frontend",
"version": "0.1.0",
"private": true,
"homepage": "https://merchant-stage.uniwebpay.com/test",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.3"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^8",
"eslint-config-next": "14.2.3"
}
}
4:更改page.tsx文件
'use client'
import Image from "next/image";
import Login from "./login";
import './globals.css'
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24 bg-white">
<Login/>
</main>
);
}
5:运行编译命定
npm ru build
6:把输出out文件放到nginx文件目录上/var/www/test/
7:修改nginx default配置文件
location /test {
alias /var/www/test/;
}
8:域名访问地址
https://xxx.xx.com/test
