使用 Next.js 创建第一篇文章
2023年03月19日 - 约 556 字

创建文章页

在 pages 文件夹里创建一个 posts 文件夹，并在 posts 文件夹里创建一个 first-post.js 文件，最后在文件里写入下面的代码。

export default function FirstPost() {
    return <h1>FanMa's First Post</h1>;
}

在浏览器里访问 http://localhost:3000/posts/first-post 网页，这时你应该可以看到网页里显示 FanMa's First Post 的信息内容。

首页引入文章

回到 pages/index.js 内容里，在内容顶部添加下面的代码用来引入 Link 组件 next/link 。

import Link from 'next/link';

然后在下面找到 <main> 标签，在这个标签里面添加下面的代码内容进去。

<ul>
    <li>
        <Link href="/posts/first-post">My first post.</Link>
    </li>
</ul>

此时 pages/index.js 完整的内容如下所示：

import Link from 'next/link';

export default function Home() {
  return (
    <main>
        <h1>
            FanMa Blog's HomePage
        </h1>
        <p>
            This a FanMa Blog.
        </p>
        <ul>
            <li>
                <Link href="/posts/first-post">My first post.</Link>
            </li>
        </ul>
    </main>
  );
}

添加首页链接

按照上面的方法，接下来打开 pages/posts/first-post.js 并将其内容替换为以下内容：

import Link from 'next/link';

export default function FirstPost() {
    return (
        <>
            <h1>FanMa's First Post</h1>
            <h2>
                <Link href="/">Back to home</Link>
            </h2>
        </>
    );
}

引入 Head 组件

回到 pages/index.js 文件里里，在文件顶部添加下面的代码用来引入 Head 组件 next/head 。

import Head from 'next/head';

然后在 <main> 标签上面添加下面的代码进去：

<Head>
    <title>FanMa Blog's HomePage</title>
    <link rel="icon" href="/favicon/favicon.ico" />
</Head>

这时候 VS Code 编辑器会出现红色的波浪线提示我们有错误，这时候我们在 <main> 和 <Head> 外面使用 <> ... </> 来包裹它们就正常了。

首页效果

这此的 pages/index.js 完整的内容如下所示：

import Head from 'next/head';
import Link from 'next/link';

export default function Home() {
  return (
    <>
        <Head>
            <title>FanMa Blog's HomePage</title>
            <link rel="icon" href="/favicon/favicon.ico" />
        </Head>
        <main>
            <h1>
                FanMa Blog's HomePage
            </h1>
            <p>
                This a FanMa Blog.
            </p>
            <ul>
                <li>
                    <Link href="/posts/first-post">My first post.</Link>
                </li>
            </ul>
        </main>
    </>
  );
}

回到浏览器 http://localhost:3000 的首页，刷新一下网页，此时我们可以看到这个网页在浏览器显示的 FanMa Blog's HomePage 标题了。

使用 Next.js 创建第一篇文章2023年03月19日 - 约 556 字