react.js app

Getting started with a new React app is easier than ever with frameworks like Next.js. But those frameworks don’t always include all of the tools you want to use.

借助Next.js这样的框架，比以往任何时候都更容易开始使用新的React应用程序。 但是这些框架并不总是包含您要使用的所有工具。

How can we use Starters to become super productive when starting a new project with our favorite tools?

使用我们最喜欢的工具开始新项目时，我们如何使用Starters来提高生产力？

• What is Next.js?

  什么是Next.js？

• What is a Starter?

  什么是入门者？

• What are we going to build?

  我们要建造什么？

• Adding Sass to a Next.js Starter

  将Sass添加到Next.js入门

• Setting up Next.js Starter documentation for easy setup

  设置Next.js Starter文档以简化设置

• Some other things to consider

  需要考虑的其他事项

什么是Next.js？ (What is Next.js?)

Next.js is an application framework from Vercel that allows you to very quickly bootstrap a new React application.

Next.js是Vercel的应用程序框架，可让您快速引导新的React应用程序。

Some basic features include creating pages and data fetching, and they allow you to generate a static site or use server side rendering to dynamically load your app.

一些基本功能包括创建页面和数据提取 ，它们使您能够生成静态网站或使用服务器端渲染来动态加载应用程序。

On top of that, you can take advantage of its advanced features like Routing or creating an API right next to your UI.

最重要的是，您可以利用UI的高级功能，例如“ 路由”或“创建API” 。

什么是入门者？ (What is a Starter?)

Starters are basically a git repository in the form of a template that allows you to easily create a preconfigured app.

入门程序基本上是模板形式的git存储库，可让您轻松创建预配置的应用程序。

There’s nothing necessarily special about a Starter. At it’s core, it’s a Next.js app that’s already been set up a specific way and typically generalized so that anyone can use it.

入门版没有什么特别的。 从本质上讲，它是一个Next.js应用程序，已经按照特定的方式进行了设置，并且通常对其进行了概括，以便任何人都可以使用它。

For example, if you tend to build lots of apps the same way each time, you might have to repeat those same configuration steps every time you create a new app.

例如，如果您倾向于每次都以相同的方式构建许多应用程序，则每次创建新应用程序时可能必须重复相同的配置步骤。

Instead, you can create a Starter from where you'll start your projects – and it'll eliminate the need to repeat those first steps each time.

取而代之的是，您可以在其中启动项目的地方创建一个Starter，这样就无需每次都重复这些第一步。

我们要建造什么？ (What are we going to build?)

We’re going to build a basic Next.js Starter that will let you or anyone else quickly and easily create a new project with that Starter as a starting point.

我们将构建一个基本的Next.js Starter，它将使您或其他任何人都能快速，轻松地以Starter为起点创建一个新项目。

While we won’t go too heavy into features, as the goal here is to learn about Starters, we’ll test this out by adding Sass to Next.js so someone can easily get started with CSS superpowers.

尽管我们不会过多地介绍功能，但这里的目标是学习Starters，我们将通过在Next.js中添加Sass进行测试，以便有人可以轻松地开始使用CSS超级功能。

You can check out the Starter on GitHub: github.com/colbyfayock/next-sass-starter.

您可以在GitHub上查看Starter ： github.com/colbyfayock/next-sass-starter 。

创建一个新的Next.js Starter (Creating a new Next.js Starter)

To get started with creating a Starter, we need to start with a Next.js app.

要开始创建Starter，我们需要从Next.js应用程序开始。

We can do this by running the following command in whatever directory you want to create this in:

我们可以通过在要在其中创建目录的任何目录中运行以下命令来执行此操作：

yarn create next-app
# or
npx create-next-app

Once you run that, Next.js will ask you for a project name. While you can use whatever you like, Next.js Starters typically have a name pattern of next-[name]-starter.

运行该文件后，Next.js将要求您提供项目名称。 尽管可以使用任何内容，但Next.js Starters通常具有next-[name]-starter -starter的名称模式。

So because we’re creating a Sass Starter, I might call it next-sass-starter.

因此，因为我们正在创建一个Sass Starter，所以我可以称其为next-sass-starter 。

Once Next.js has installed all of our dependencies, you’ll be ready to navigate to that folder and run the command to start your development server.

一旦Next.js安装了我们所有的依赖项，您就可以导航到该文件夹​​并运行命令来启动开发服务器。

yarn dev
# or
npm run dev

And once the development server starts up, we should be ready to go!

开发服务器启动后，我们应该准备好了！

At this point, we pretty much have a basic Starter. As mentioned before, there really isn’t much that’s actually special with a Next.js Starter. So if we pushed this up to Github, we could immediately start using it “as is”.

至此，我们几乎有了一个基本的启动器。 如前所述，Next.js Starter实际上并没有什么特别的。 因此，如果我们将此推到Github，我们可以立即“按原样”开始使用它。

You can test this out by running the following:

您可以通过运行以下命令进行测试：

yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]

After running that, you should be set up with a new directory that has a project created from your Starter with all of the dependencies installed.

运行该文件后，应设置一个新目录，该目录包含一个从Starter创建的项目，并安装了所有依赖项。

But we want to do more than that. Our goal is to add features that help get an app started with more than the default, so let’s add Sass.

但是，我们想做的不只是这些。 我们的目标是添加功能，以使应用程序比默认应用程序更多地启动，因此让我们添加Sass。

Follow along with the commit!

跟随提交！

将Sass添加到Next.js入门 (Adding Sass to a Next.js Starter)

Note: For our example, we’re going to create a Sass starter as the name above might have implied. Feel free to add any features you want at this point, whether it includes Sass or not.

注意：在我们的示例中，我们将创建一个Sass启动程序，因为上面的名称可能暗示了该名称。 随时添加您想要的任何功能，无论它是否包含Sass。

Remember – the goal here will be to provide something that we’ll be able to use when creating a new project with this Starter.

请记住–这里的目标是提供一些东西，以便在使用此Starter创建新项目时可以使用。

Next, we want to actually add Sass to our project. To get started, we want to install sass as a dependency:

接下来，我们想将Sass实际添加到我们的项目中。 首先，我们要安装sass作为依赖项：

yarn add sass
# or
npm install sass

Next, because Next.js already looks for .scss as a file extension, we can simply update out two CSS files under the styles directory to .scss.

接下来，由于Next.js已经查找.scss为文件扩展名，我们可以简单的下两个CSS文件，更新了styles目录.scss 。

So change the following files:

因此，更改以下文件：

styles/globals.css => styles/globals.scss
styles/Home.module.css => styles/Home.module.scss

Next, we need to set up our import statements to recognize our new file extensions.

接下来，我们需要设置导入语句以识别我们的新文件扩展名。

In pages/_app.js, update the styles import at the top to:

在pages/_app.js ，将顶部的样式导入更新为：

import '../styles/globals.scss'

And in pages/index.js, update the styles import to:

然后在pages/index.js ，将样式导入更新为：

import styles from '../styles/Home.module.scss'

At this point, you can start your development server and we should still see the default Next.js page.

此时，您可以启动开发服务器，我们仍然应该看到默认的Next.js页面。

To see our Sass in action, we can update some of our classes to use nested styles instead of individual selectors.

要查看Sass的运行情况，我们可以更新一些类以使用嵌套样式而不是单个选择器。

Update all of the .footer selectors inside of styles/Home.module.scss to the following:

将styles/Home.module.scss内部的所有.footer选择器更新为以下内容：

.footer {width: 100%;height: 100px;border-top: 1px solid #eaeaea;display: flex;justify-content: center;align-items: center;img {margin-left: 0.5rem;}a {display: flex;justify-content: center;align-items: center;}}

You can use the same nesting structure to update .title and .card.

您可以使用相同的嵌套结构来更新.title和.card 。

We can also add the following to the top of our styles/Home.module.css file:

我们还可以将以下内容添加到styles/Home.module.css文件的顶部：

$color-primary: #0070f3;

And update all instances of the color in that file from #0070f3 to $color-primary:

并将该文件中所有颜色的实例从#0070f3为$color-primary ：

.title {...a {color: $color-primary;

If you reload the page, nothing will change. But update that variable to your favorite color like:

如果重新加载页面，则不会有任何改变。 但是将该变量更新为您喜欢的颜色，例如：

$color-primary: blueviolet;

And now all of the colors change.

现在所有的颜色都改变了。

Finally, since we now have a Sass starter, let’s update the title of the page. Replace “Welcome to Next.js!” In pages/index.js to:

最后，由于我们现在有了一个Sass启动器，因此让我们更新页面的标题。 替换为“欢迎使用Next.js！” 在pages/index.js中：

<h1 className={styles.title}><a href="https://nextjs.org">Next.js</a> Sass Starter
</h1>

And now we have a Sass starting point!

现在我们有了Sass的起点！

Similar to before, you can test this out by creating a new project with your starter once all of the changes are on GitHub.

与以前类似，一旦所有更改都在GitHub上，您可以通过使用启动器创建一个新项目来进行测试。

yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]

Follow along with the commit!

跟随提交！

设置Next.js Starter文档以简化设置 (Setting up Next.js Starter documentation for easy setup)

Arguably one of the most important things about a Starter is documentation.

可以说，关于Starter的最重要的事情之一就是文档。

It might not be as important if you’re only using this yourself. But if you want other people to use it, you want them to know how to use it or else they’ll get stuck and become frustrated.

如果您仅自己使用此功能，则可能不那么重要。 但是，如果您希望其他人使用它，则希望他们知道如何使用它，否则他们会陷入困境并感到沮丧。

The most important part is getting the Starter set up. Setting up your Starter in a GitHub repo is a great first step. But if someone wants to use that Starter, they would have to clone or download that repo and then remove the git history.

最重要的部分是设置入门程序。 在GitHub存储库中设置Starter是第一步。 但是，如果有人想使用该Starter，则必须克隆或下载该仓库，然后删除git历史记录。

Instead, you can add the command we used above in your README.me file to give people instructions on how to quickly get started, such as:

相反，您可以在README.me文件中添加上面使用的命令，以向人们提供有关如何快速入门的说明，例如：

## Getting StartedRun the following command to create a new project with this Starter:```
yarn create next-app [project-name] -e https://github.com...
# or
npx create-next-app [project-name] -e https://github.com...
```

This will prevent people who might not understand how to do some of those things manually from getting stuck.

这样可以防止可能不了解如何手动执行其中某些操作的人员陷入困境。

It’s also important to add any documentation of configuration options you’ve added.

添加已添加的配置选项的任何文档也很重要。

If you’re adding some variables that allow you to change some site-wide features, make sure to add notes about those.

如果要添加一些变量，以允许您更改某些站点范围的功能，请确保添加有关这些功能的注释。

You ultimately want people to understand how to use the features you added to make their lives easier. If they don’t understand it, they may just rip that code out and do it manually.

您最终希望人们理解如何使用添加的功能来简化生活。 如果他们不理解，他们可能会撕掉该代码并手动执行。

Ultimately, creating and publishing a Starter is about making people’s lives easier. Whether it’s you coming back to your Starter a few months later or a swarm of new people looking to get productive, you’re giving them a better developer experience by adding good documentation.

最终，创建和发布Starter就是要使人们的生活更轻松。 无论是几个月后返回Starter还是希望提高工作效率的一大堆新人，您都可以通过添加优质的文档来为他们提供更好的开发人员体验。

需要考虑的其他事项 (Some other things to consider)

概括功能并添加Next.js Starter的配置 (Generalizing features and adding configuration for a Next.js Starter)

Adding features is a great way to make a Starter more likely to be used. If I used a Starter to create a new blog, I would love if that Starter included my name as an author and maybe even an About Me page.

添加功能是使Starter更有可能被使用的好方法。 如果我使用Starter来创建新博客，那么我希望该Starter包含我的作者姓名，甚至可能包含About Me页面。

But what I wouldn’t want is to have to replace someone else’s name 100 times throughout the code to update my own project. Not to mention, seeing that name on the Starter might make me feel more like it’s their blog rather than a template I can use for my project.

但是，我不想在整个代码中不得不将别人的名字替换100次以更新自己的项目。 更不用说，在Starter上看到该名称可能会让我觉得它更像是他们的博客，而不是我可以用于我的项目的模板。

Consider starting off by using a generalized name throughout the project. Instead of using Colby Fayock’s Blog throughout the Starter, make it My Blog, which will make it feel less personal to the creator for the person using the Starter.

考虑在整个项目中使用通用名称开始。 与其在整个Starter中使用Colby Fayock的Blog，不如将其设置为My Blog，这对于使用Starter的人员而言，对于创建者而言，它会变得不那么个人化。

Also add some configuration options. It’s much easier to be able to update a single variable that would make my project include Colby Fayock instead of My Blog than it is to search all files to make that change manually.

还添加一些配置选项。 能够更新使我的项目包括Colby Fayock而不是My Blog的单个变量比搜索所有文件以手动进行更改要容易得多。

仔细选择要提出意见的地方 (Choose carefully where to be opinionated)

When using a tool like Sass, there is more than one way to use that tool. If you set up an incredibly specific and opinionated project structure, you’re alienating people using your Starter.

当使用诸如Sass之类的工具时，有多种方法可以使用该工具。 如果您建立了一个令人难以置信的具体和自以为是的项目结构，那么您正在使用Starter疏远人们。

It'll either force them to rework the entire project or make them want to delete a bunch of code which might make them avoid wanting to use it in the future.

这将迫使他们重做整个项目，或者使他们想删除一堆代码，这可能会使他们避免将来再使用它。

You can create opinionated Starters, but choose wisely where you inject those opinions. This will make your work usable by a larger group of people who want to be productive.

您可以创建有抱负的初学者，但要明智地选择将这些观点注入何处。 这将使您的工作可被更多想提高工作效率的人使用。

If you want to create something very opinionated, consider naming it something different and using the tool as part of the name. For example, I could create an opinionated Sass Starter called Colby’s Sassy Next.js Starter.

如果您想创建一些自以为是的东西，请考虑为其命名不同，并将该工具用作名称的一部分。 例如，我可以创建一个名为Colby的Sassy Next.js Starter的Sass Starter。

您是否创建了一个新的入门程序？ (Did you create a new Starter?)

Share with me on Twitter!

在Twitter上与我分享！