Next.js 垃圾课程 - 第 1/3 部分

Next.js

嗨，开发人员。

怎么了？希望大家都平安健康。

我最近很忙，还做了一些（无意义的🤐）作业，由于这些原因，我有一段时间没有发布任何内容。

幸运的是（或者不幸），最近几天我找到了一些空闲时间，所以我决定创建一个垃圾课程，有点像速成课程，但更糟糕。😂 本文试图涵盖所有基础知识Next.js，同时直奔主题。（除了少数例外🤦‍♀️🤦‍♂️）！

我希望你们喜欢它并且能从这里学到一些新东西。

🚨要求🚨

充分理解React（JavaScript当然）
Node.js（安装 10.13 或更高版本）
您最喜欢的代码编辑器（例如VSCode，Notepad💁等）
Git/ GitHub（选修的）

本第 1/3 部分将涵盖哪些内容？

什么和Next.js为什么
快速浏览文件夹和文件，
路线和页面，
创建和重用组件，
页面之间的链接。

Next.js

什么是 Next.js？

它是一个React允许创建预渲染React应用程序Server Side Rendering（SSR）或Static Site Generation（SSG）的框架。

SSR： 浏览器发出页面请求后，React组件在服务器上渲染成页面。HTML
SSG：组件在构建时渲染到HTML页面中。换句话说，在部署网页后，Javascript将其打包到 Web 中。

为什么要使用它？

React无需Next.js在浏览器中渲染组件（客户端渲染）。

使用Next.js，我们的组件在到达浏览器时React就已经渲染成页面，因此应用程序的行为就像一个 SPA（），所有路由都可以在客户端处理。和的优势在于性能提升，因为组件是预渲染的，这意味着浏览器中的工作量更少。此外，由于服务器的响应是一个完全渲染的页面，而不是没有的常规应用程序返回的空白页面，因此 SEO 效果也比传统的 SPA 更好（）。HTMLSimple Page ApplicationSSRSSGSearch Engine OptimizationHTMLReactNext.js

初始设置

在我们的终端类型中：

npx create-next-app nextSample
cd nextSample
code . // if you are using VSCode

第 1 部分 - 快速浏览文件夹和文件

📁 node_modules/：存储所有项目依赖项的地方。
📁 pages/：所有不同组件的创建位置。其理念是每个页面都代表着自己的 React 组件。
- 📝 index.js：主页组件。
- 📝 _app.js：根组件。所有不同的组件都在这里渲染。
- 📁 api/：用于 API 端点。
📁 public/：存储所有公共资产（例如图像等）的地方
📁 styles/：CSS放置不同文件和模块的地方。
📝 .gitignore：用于版本控制的文件，例如，node_modules在将代码推送到GitHub/BitBucket等时会忽略该文件夹。
📝package.json和package-lock.json：跟踪不同的项目依赖项、创建脚本、项目版本等。例如，"dev: "next dev"启动本地开发服务器的脚本。
📝 README.md：这个文件用来保存项目的重要信息。我就是在这里写下你正在读的这篇文章，之后才发布。

启动开发服务器

npm run dev

如果一切顺利的话，你应该在浏览器中看到类似这样的内容（http://localhost:3000/）：

简而言之，这就是pages/index.js您之前在Walk-Through部分看到的文件。

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

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  );
}

别慌。因为我们的目标是从头开始，所以我们会在开始之前清理这个文件。新版本的文件index.js应该如下所示：

export default function Home() {
  return (
    <div>
      <h1>Hello Next.js</h1>
    </div>
  );
}

请记住，Next.js组件在到达浏览器之前会进行预渲染。在开发过程中，预渲染是通过服务器端渲染 (SSR) 完成的，这意味着服务器会先渲染组件，然后再将其发送HTML到浏览器。这在浏览器发出的每个页面请求中都会发生，例如，如果我们输入不同的 URL，它会查找与该 URL 对应的页面组件，对其进行预渲染并将其发送到浏览器。我们稍后会更深入地探讨这一点。

第二部分 - 路由和页面

pages 文件夹是我们创建页面组件的地方。每个页面Next.js都由一个组件驱动React，例如，“关于页面”有一个“关于组件”，“联系页面”有一个“联系组件”，等等。

例如/pages/contact.js，当我们在 pages 文件夹中创建一个文件时，放置在那里的组件会绑定到同名路由。唯一的例外是index.js与域名根目录对应的文件/。

让我们一起来做一下，这样更容易理解。在pages文件夹内创建一个名为的新文件about.js，并将下面的内容粘贴到其中。

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is our About Page</p>
    </div>
  );
};

export default About;

现在，如果我们访问http://localhost:3000/about它，就能看到我们刚刚创建的页面组件。尤其值得一提的是，它是一个非常实用的功能，因为我不需要React Router像在普通React应用程序中那样费心安装它了。

顺便说一下，如果你在 pages 文件夹内创建一个子文件夹，它的工作方式也是一样的。这Next.js将为应用程序创建一个子路由。是不是很棒？

说到“相同的方式”，如果你创建一个子文件夹并在其中放置一个index.js文件，它将成为此路由的根路径。（例如，/pages/dev/index.js当你访问时，http://localhost:3000/dev/内容index.js将被渲染）。我复制了这个完全相同的例子，所以如果你感到困惑，可以在这里查看。👈 剧透警告！

第 3 部分 - 创建和重用组件♻️

与常规React应用程序一样，我们可以拥有不仅仅是页面组件（例如、等）的组件buttons，这些组件可以在需要时通过应用程序重复使用navbars。footers

我们不会在 pages 文件夹中创建这些组件。当然你可以这样做，但随着应用程序规模的扩大，很容易丢失这些组件的追踪。
我通常将可复用的组件放在项目根目录下的一个名为的文件夹中components。同样，你可以根据需要进行操作。

我Button在组件文件夹中创建了一个非常丑陋的组件，只是为了作为示例。

export const Button = ({ children }) => {
  return <button onClick={() => console.log('Clicked!')}>{children}</button>;
};

并将其导入如下/pages/dev/index.js。

import { Button } from '../../components/Button';

export default function Home() {
  return (
    <div>
      <h1>Hello Devs</h1>
      <Button>Dev Button</Button>
    </div>
  );
}

很抱歉本文用了这么多例子。我的创造力今天没能充分发挥出来。🎭

我还在Navbar那里创建了一个组件，因为我们稍后在学习有关“链接”和“样式”的更多信息时会使用它，所以请继续关注。

export const Navbar = () => {
  return (
    <nav>
      <div className="brand">
        <h3>Dev Brand</h3>
      </div>
      <a>Home</a> {/** We will change the anchor tags later on*/}
      <a>About</a>
      <a>Dev</a>
    </nav>
  );
};

并且不要忘记导入pages/index.js：

import { Navbar } from '../components/Navbar'; /** Here */

export default function Home() {
  return (
    <div>
      <Navbar /> {/** Also Here */}
      <h1>Hello Next.js</h1>
    </div>
  );
}

现在http://localhost:3000/我们可以看到Navbar那里的组件了。如果你的背景知识比较浅显，React那么这里就没什么新东西了。

Navbar我还创建了一个附加组件Footer（/components/Footer.js），因为结合它们，我们将在第 2/3 部分学习如何创建“布局”。我今天是不是说过我缺乏创造力？所以，别评判。

export const Footer = () => {
  return <footer>Copyright 2021 | Next.js</footer>;
};

我们的主页组件的最终版本（目前）将类似于以下内容：

import { Navbar } from '../components/Navbar';
import { Footer } from '../components/Footer'; 

export default function Home() {
  return (
    <div>
      <Navbar />
      <h1>Hello Next.js</h1>
      <Footer /> 
    </div>
  );
}

创建组件并通过应用程序重用它们就是这么简单。

第 4 部分 - 页面之间的链接

我们链接页面的方式Next.js是使用一个叫做Link“组件”的特殊组件。它增加了在浏览器中进行客户端导航的功能，也就是说，不同的页面是通过“组件”加载的Javascript，而不是通过HTML向服务器发出新的页面请求。

导入Link组件后，next/link我们可以在应用程序中使用，如Navbar组件示例所示：

import Link from 'next/link'; // This line

export const Navbar = () => {
  return (
    <nav>
      <div className="brand">
        <h3>Dev Brand</h3>
      </div>
      <Link href="/">Home</Link> {/** usage :)*/}
      <Link href="/about">About</Link>
      <Link href="/dev/">Dev</Link>
    </nav>
  );
};

这又是一个示例，因为我们确实喜欢示例，不是吗？所以，在你的主页组件中（/pages/index.js）：

import { Navbar } from '../components/Navbar';
import { Footer } from '../components/Footer';
import Link from 'next/link'; // Again we import the Link Component

export default function Home() {
  return (
    <div>
      <Navbar />
      <h1>Hello Next.js</h1>
      <Link href="/about">About Page</Link>{' '}
      {/** And use it here as following */}
      <Footer />
    </div>
  );
}

本文的前三分之一部分已经讲完了。在这一Next部分（双关语🃏），我将讨论一些内容，例如：

布局，
添加样式（全局样式表和 CSS 模块），
创建自定义的“未找到”页面，
正在重定向。

感谢阅读，再见（ ~~下一部分~~）稍后。😉

第 2/3 部分和
第 3/3 部分已经开始。🖥️🔥

文章来源：https://dev.to/vinicius77/next-js-trash-course-part-1-3-2dlb