1 创建nextjs项目

创建nextjs项目需要安装nodejs,这里就不展开了。

输入以下命令创建一个nextjs项目:

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>
  );
}