如果觉得本站的内容有帮助，可以考虑打赏博主哦！
欢迎大家交换友链，可在https://www.stubbornhuang.com/申请友情链接进行友链交换申请！
感谢大家访问本站，希望本站的内容可以帮助到大家！
在本站开通年度VIP，无限制下载本站资源和阅读本站文章
本站会放置Google广告用于维持域名以及网站服务器费用。
工资「喂饱肚子」，副业「养活灵魂」！
问题反馈可发送邮件到stubbornhuang@qq.com
本站由于前段时间遭受到大量临时和国外邮箱注册，所以对可注册的邮箱类型进行了限制！
计算机图形学与计算几何经典必备书单整理，下载链接可参考：https://www.stubbornhuang.com/1256/

Next.js – 创建一个空白的Next.js项目

StubbornHuang 独立开发发布于2025-03-19 阅读 4,697次 0次评论 0次点赞本文共1740个字，阅读需要5分钟。

1 创建Next.js项目

创建Next.js项目需要安装nodejs，这里就不展开了。

输入以下命令创建一个Next.js项目：

npx create-next-app@latest

然后按照下面的说明创建nextjs项目

√ What is your project named? test # 这里是你项目的名称，会在运行上述命令的文件夹下创建一个项目名称的文件夹，之后也是项目目录
√ Would you like to use TypeScript? ... No / Yes # 是否使用TypeScript，建议Yes
√ Would you like to use ESLint? ... No / Yes # 是否使用ESLint，建议Yes
√ Would you like to use Tailwind CSS? ... No / Yes # 是否使用Tailwind CSS，建议Yes
√ Would you like your code inside a `src/` directory? ... No / Yes # 是否将源代码放在src目录，建议Yes
√ Would you like to use App Router? (recommended) ... No / Yes # 是否使用App Router，建议Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes # 是否使用Turbopack，可以Yes也可以No
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in E:\ProgramSpace\DailyProgramming\nextjs\test.

等待项目创建完成，此时你可以删除src的默认文件获取一个空白的nextjs项目。

2 安装项目依赖

进入到你的项目目录，使用以下命令安装项目依赖

npm install

3 运行项目

在项目目录下，运行以下命令可以在本地运行项目

npm run dev

4 清理默认项目文件到一个空项目

首先清除public默认生成的各种图标文件。

然后简化主页面src/app/page.tsx的内容，使用以下内容：

export default function Home() {
  return (
    <div className="min-h-screen p-8">
      <main>
        <h1 className="text-2xl font-bold">欢迎来到我的Next.js应用</h1>
        <p className="mt-4 text-gray-600">开始构建您的应用吧！</p>
      </main>
    </div>
  );
}

然后在src/app/layout.tsx文件中去除google字体依赖，避免google字体下载失败，将src/app/layout.tsx修改为以下代码

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

// const geistSans = Geist({
//   variable: "--font-geist-sans",
//   subsets: ["latin"],
// });

// const geistMono = Geist_Mono({
//   variable: "--font-geist-mono",
//   subsets: ["latin"],
// });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        //className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        className= "antialiased"
      >
        {children}
      </body>
    </html>
  );
}

欢迎扫码关注我的微信公众号，及时获取文章更新