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上與我分享！

• 🐦 Follow Me On Twitter

  Twitter在Twitter上關注我

• 📺 Subscribe To My Youtube

  📺訂閱我的YouTube

• ?? Sign Up For My Newsletter

  ??注冊我的時事通訊

• 💝 Sponsor Me

  💝贊助我

翻譯自: https://www.freecodecamp.org/news/how-to-create-a-nextjs-starter-to-easily-bootstrap-a-new-react-app/

react.js app

總結

以上是生活随笔為你收集整理的react.js app_如何创建Next.js入门程序以轻松引导新的React App的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。