网站LOGO
白雾茫茫丶
页面加载中
5月2日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
分类
话题
归档
生活
茶馆
小站
关于
Next.js 实战 (一)：项目搭建指南
正文
    • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Next.js 实战 (一)：项目搭建指南
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
    • 一 言
    确认删除此评论么？ 确认
    搜　索
    • 本弹窗介绍内容来自，本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    • 复制链接文字
    • 复制链接地址
    • 打开链接
    • 新窗口打开链接
    按住ctrl可打开默认菜单

    Next.js 实战 (一)：项目搭建指南

    共 4036 字 · 约 2 分钟 · 1916
    谢明伟 · 原创 ·
    前端开发、Next 实战 · React、Next
    共 4036 字 · 约 2 分钟 · 1916
    谢明伟 · 原创 ·
    本文最后更新于2024年12月05日，已经过了147天没有更新，若内容或图片失效，请留言反馈
    QX-AI
    切换简介
    GPT-4
    生成中. . .
    介绍自己
    推荐相关文章
    生成AI简介
    矩阵穿梭

    前言

    时间过得好快，一下就来到2024下半年了。

    上半年我为了学习 Nuxt3，从 0 到 1 开发了一个导航网站：Dream Site，目前主要的功能都已完成了，后续有时间再慢慢添加有趣的功能。

    下半年开始进攻 Next.js，前段时间我使用 Next.js 重构了一个项目：今日热榜，对 Next.js 有一定的认识，这次打算完整地从 0 到 1 搭建一个后台模板，进而探索 Next.js 的奥秘。

    项目搭建

    1. 官方建议使用 create-next-app 启动一个新的 Next.js 应用程序：

      bash 代码:
      npx create-next-app@latest

    2. 安装时，你将看到以下提示：

      txt 代码:
      What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

      Next.js现在默认附带 TypeScript、ESLint 和 Tailwind CSS 配置。

    3. 项目运行

      text 代码:
      pnpm dev

    目录结构

    txt 代码:
    📄 next.config.js // Next.js的配置文件
📄 package.json // 项目依赖项和脚本
📄 instrumentation.ts // OpenTelemetry and Instrumentation 文件
📄 middleware.ts // Next.js请求中间件
📄 .env // Environment variables 环境变量
📄 .env.local // 局部环境变量
📄 .env.production // 生产环境变量
📄 .env.development // 开发环境变量
📄 .eslintrc.json // ESLint 的配置文件
📄 .gitignore // 要忽略的 Git 文件和文件夹
📄 next-env.d.ts // 用于 Next.js 的 TypeScript 声明文件
📄 tsconfig.json // TypeScript 的配置文件
📄 jsconfig.json // JavaScript 的配置文件

    APP 路由约定

    txt 代码:
    📄 layout[.js,.jsx,.ts] // Layout 布局
📄 page[.js,.jsx,.ts] // Page 页
📄 loading[.js,.jsx,.ts] // Loading UI 加载 UI
📄 not-found[.js,.jsx,.ts] // Not found UI 未找到 UI
📄 error[.js,.jsx,.ts] // Error UI 错误 UI
📄 global-error[.js,.jsx,.ts] // Global error UI 全局错误 UI
📄 route[.js,.ts] // API endpoint API 端点
📄 template[.js,.jsx,.ts] // Re-rendered layout 重新渲染的布局
📄 default[.js,.jsx,.ts] // 并行路由回退页面

    更多约定请参考：App Routing Conventions

    配置 Eslint、Prettierrc、Husky等项目提交规范

    参考文章：

    Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范
    前端开发 010 头像谢明伟

    使用 release-it 自动管理版本号和生成 CHANGELOG

    参考文章：

    Nuxt3 实战 (三)：使用 release-it 自动管理版本号和生成 CHANGELOG
    前端开发 000 头像谢明伟

    import 排序规则

    参考文章：

    使用 sort-imports 排序规则美化头部 import 代码
    前端开发 000 头像谢明伟

    安装 NextUI

    1. 根目录运行

      bash 代码:
      pnpm add @nextui-org/react framer-motion

    2. 新建 .npmrc 文件，并写入以下内容

      txt 代码:
      public-hoist-pattern[]=*@nextui-org/*

    3. tailwind.config.js 配置文件添加代码：

      ts 代码:
       import { nextui } from '@nextui-org/react';
 import type { Config } from 'tailwindcss';

 const config: Config = {
darkMode: 'class',
content: [
 './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
 extend: {}
},
plugins: [nextui()],
 };
 export default config;

    4. 在根节点添加 NextUIProvider

      tsx 代码:
       import './globals.scss';

 import { NextUIProvider } from '@nextui-org/react';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';

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

 export const metadata: Metadata = {
title: 'next-admin',
description: '基于 Next.js 开发的后台模板',
 };

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

    总结

    后续开发会以 Next.js 为核心，开发一个类似 Xmw-Admin 项目的功能，为此来探索 Next.js 其中的奥秘：

    我会在此基础上加入我的一些设计和想法，致力于提高用户体验。

    开发周期可能会有点长，但我会记录在开发中所遇到的问题和解决的办法，并记录在 Next实战系列 中，后期会打算使用 Prisma + Supabase 数据库存储数据，最终完成一个基于 Next.js 的全栈项目。

    声明：本文由 谢明伟（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议 授权，转载请注明出处。

    还没有人喜爱这篇文章呢
    现在已有

    8

    条评论     我要发表评论
    1. 头像 zlx
      · · 湖北-武汉
      • 等级：Lv.1
      • 角色：访客
      • 在线：很久之前
      头像
      zlx
      板凳

      大佬 啥时候更新以下nextjs的教程

      评论
      1. 头像 谢明伟
        · · 广东-深圳
        • 角色：博主
        • 在线：本周
        头像
        谢明伟 zlx

        最近在更新 Nest.js 的内容，这个要晚点了，还要兼顾工作，精力比较有限

        评论
        1. 头像 zlx
          · · 北京-北京
          • 等级：Lv.1
          • 角色：访客
          • 在线：很久之前
          头像
          zlx 谢明伟

          好的好的 感谢大佬

          评论
    2. 头像 colin
      · · 上海-上海
      • 等级：Lv.2
      • 角色：访客
      • 在线：很久之前
      头像
      colin
      沙发

      cool, xwadmin 是我看到开源项目中 AntD 做的最好的其中一个。

      评论
      1. 头像 colin
        · · 上海-上海
        • 等级：Lv.2
        • 角色：访客
        • 在线：很久之前
        头像
        colin colin

        绿草苍苍，白雾茫茫，
        有位佳人，在水一方。

        评论
        1. 头像 谢明伟
          · · 广东-深圳
          • 角色：博主
          • 在线：本周
          头像
          谢明伟 colin

          很有文化，博客一下就变得高大上了，哈哈

          评论
      2. 头像 colin
        · · 上海-上海
        • 等级：Lv.2
        • 角色：访客
        • 在线：很久之前
        头像
        colin colin

        关注并学习中....这两天为React + Next + antd 迷茫着

        评论
        1. 头像 谢明伟
          · · 广东-深圳
          • 角色：博主
          • 在线：本周
          头像
          谢明伟 colin

          感谢关注，如果觉得对你有帮助，帮忙点个 star 哟

          评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 4天前 在线

    🕛

    本站已运行 3 年 121 天 15 小时 2 分

    🌳

    自豪地使用 Typecho 建站，并搭配 MyLife 主题     白雾茫茫丶. © 2022 ~ 2025.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事
    　
    　
    　
    　
    　
    　
    　
    　

    8

    1

  • 下一篇
    •