使用 Next.js 和 React 来构建一个简单的应用_nextjs + react 创建项目-CSDN博客

Next.js 是一个用于构建服务器渲染 React 应用的框架。它提供了丰富的功能，如静态生成、服务器端渲染、API 路由等，极大地简化了现代 Web 应用的开发。本文将介绍如何使用 Next.js 和 React 来构建一个简单的应用，帮助你快速入门。

1. 安装和初始化项目

首先，你需要安装 Node.js 和 npm（或 yarn）。然后，使用以下命令创建一个新的 Next.js 项目：

npx create-next-app my-next-app
cd my-next-app

2. 目录结构

初始化完成后，你的项目目录结构如下：

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
├── .gitignore
├── package.json
├── README.md

pages/：包含所有页面组件。每个文件代表一个路由。
public/：存放静态资源，如图片、字体等。
styles/：存放样式文件。
_app.js：自定义应用入口，所有页面都会经过这个组件。

3. 创建首页

在 pages/index.js 文件中创建一个简单的首页组件：

// pages/index.js
import React from 'react';
import Head from 'next/head';

const Home = () => {
  return (
    <div>
      <Head>
        <title>Home Page</title>
      </Head>
      <main>
        <h1>Welcome to Next.js!</h1>
        <p>This is a simple Next.js application.</p>
      </main>
    </div>
  );
};

export default Home;

4. 添加全局样式

在 styles/globals.css 文件中添加一些全局样式：

/* styles/globals.css */
body {
   
   
  font-family: Arial