如何使用Next.js搭建一个简单的个人网站

如何使用Next.js搭建一个简单的个人网站

使用Next.js，可以让你快速上手，轻松构建出响应式和SEO友好的网页。下面是一步一步的教程，让我们一起动手吧！

第一步：环境准备

  1. 安装Node.js：首先确保你的电脑上安装了Node.js，可以在Node.js官网下载并安装最新版本。
  2. 安装npm或yarn：Node.js 安装后会自带 npm，你也可以选择安装 yarn。

第二步：创建Next.js项目

  1. 创建项目：在终端中运行以下命令来创建一个新的Next.js应用：

    npx create-next-app my-personal-website

    这将会创建一个名为 my-personal-website 的文件夹，里面包含了基本的Next.js项目结构。

  2. 进入项目目录：

    cd my-personal-website

第三步：项目结构介绍

在项目目录中，你会看到一些文件和文件夹：

  • pages/：存放页面的文件夹，每个文件代表一个路由。
  • public/：存放静态文件的文件夹，比如图片。
  • styles/：存放CSS样式的文件夹。

第四步：创建个人主页

  1. 修改首页：打开 pages/index.js，替换内容为以下代码：

    import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>我的个人网站</title>
                <meta name="description" content="欢迎来到我的个人网站！" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className={styles.main}>
                <h1 className={styles.title}>欢迎来到我的个人网站!</h1>
                <p className={styles.description}>
                    这里是我的个人介绍和博客文章的汇集。
                </p>
                <a href="/about">了解更多</a>
            </main>

            <footer className={styles.footer}>
                <p>© 2024 我的名字</p>
            </footer>
        </div>
    );
}

  2. 创建关于页面：在 pages 文件夹下创建一个新的文件 about.js，并添加以下内容：

    import Head from 'next/head';

export default function About() {
    return (
        <div>
            <Head>
                <title>关于我</title>
            </Head>
            <h1>关于我</h1>
            <p>这里是关于我的一些信息。</p>
        </div>
    );
}

第五步：运行项目

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

打开浏览器，访问 http://localhost:3000，你应该能看到你刚刚创建的个人网站首页。

第六步：添加样式

  1. 修改样式：你可以在 styles/Home.module.css 中添加一些自定义样式，例如：

    .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 0.5rem;
    color: #333;
}

.title {
    font-size: 4rem;
    margin: 0;
}

.description {
    font-size: 1.5rem;
}

.footer {
    margin-top: auto;
    padding: 1rem;
    text-align: center;
}

第七步：部署网站

完成网站后，可以将其部署到 Vercel 或其他平台上。使用 Vercel 部署非常简单，只需安装 Vercel CLI：

npm i -g vercel

然后在项目根目录下运行：

vercel

按照提示完成部署，你的个人网站就上线了！

#建站
如何使用Next.js搭建一个简单的个人网站
http://localhost:8090//archives/202407131727
作者
QiuLingYan
发布于
2024年07月01日
许可协议