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

原创

白雾茫茫丶

修改于 2024-07-03 16:37:35

1290

修改于 2024-07-03 16:37:35

文章被收录于专栏：Next.js14 实战系列Next.js14 实战系列

前言

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

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

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

项目搭建

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

npx create-next-app@latest

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

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、项目运行

pnpm dev

目录结构

📄 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 路由约定

📄 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

开发规范

这些配置在以前的文章写过，就不重复了，需要的可以参考下

安装 NextUI

1、根目录运行

pnpm add @nextui-org/react framer-motion

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

public-hoist-pattern[]=*@nextui-org/*

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

 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

 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 其中的奥秘：

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

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

next.js

react.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

next.js

react.js

登录后参与评论

0 条评论

热度