Next.js极简教程+快速实战

qcyl_weyyds

已于 2024-05-04 20:18:56 修改

阅读量522

点赞数 4

文章标签： react.js node.js

于 2024-05-04 20:17:11 首次发布

本文链接：https://blog.csdn.net/HeYanJuns/article/details/138447999

版权

一.准备工作

 1.node版本V18+
 2.vscode

二.创建项目

1.npx create-next-app  项目名称
2.组件库和第三方插件推荐： 
   ①.prisma: 数据库orm操作插件  
          安装：npm install prisma --save-dev 
          初始化： npx prisma init --datasource-provider mysql
          执行完初始化之后打开.env文件修改：DATABASE_URL="mysql://数据库用户名:数据库密码@主机ip:端口/数据库名称"
  ②.@nextui-org/react: ui组件库
          安装：npm install @nextui-org/react framer-motion -s
          使用：创建文件src/app/providers.tsx 使用以下内容

'use client'
import {NextUIProvider} from '@nextui-org/react'
import {ThemeProvider as NextThemesProvider} from "next-themes";

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      <NextThemesProvider attribute="class" defaultTheme="dark">
        {children}
      </NextThemesProvider>
    </NextUIProvider>
  )
}

在src/app/layout.tsx里面使用

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Providers } from "./providers";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "next极简教程",
  description: "next极简教程",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
      <html lang="en">
        <body className={inter.className}>
          <Providers>
            {children}
          </Providers>
        </body>
      </html>
  );
}

在tailwind.config.ts里面添加以下代码

import { nextui } from "@nextui-org/react" // 添加此行
const config: Config = {
  content: [
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}" // 添加此行
  ],
  darkMode: "class", // 添加此行
  plugins: [nextui()], // 添加此行
};

③.字体图标库：lucide-react

三.目录介绍

 1.src/app/layout.tsx默认路由的layout，pages是默认路由的文件入口位置
 2.src/app/api目录是专门管理接口，所有接口入口文件必须为route.ts
   例子：创建src/app/api/route.ts，创建一个get请求

import { NextResponse } from "next/server";
export async function GET() {
    return NextResponse.json("ok")
}

调用： 127.0.0.1:3000/api，如果想定义其他的名称可以创建src/app/api/user/route.ts,调用的话就是：127.0.0.1:3000/api/user

四.项目部署

1.宝塔安装git，然后使用拉取仓库代码，然后使用npm run build最后使用pm2运行

qcyl_weyyds

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Next.js极简教程+快速实战

nextjs项目启动，打包，部署
复制链接

扫一扫