feat: convert React tutorial to NextJS tutorial (#3710)

* feat: nextjs tutorial added

* chore: step 5 changed to vercel platform

* chore: changed docs on step 5

* fix: fixed names

* fix: fixed the docs

* docs: update NextJS content

* Update README.md

update syntax

* Update src/pages/developing/frameworks/react.mdx

* Update src/pages/developing/next-tutorial/faq.mdx

Co-authored-by: Andrea N. Cardona <[email protected]>

* docs: changed nextjs names to react

* fix: fixed format

* Update README.md

Co-authored-by: Scott Strubberg <[email protected]>

* fix: fixed docs about deploy

* Update step-1.mdx

* fix: fixed dosc based on feedback

* fix: replace icons with pictograms

* fix: updated new images

* Update wrapping-up.mdx

* Update overview.mdx

* Update step-1.mdx

* Update step-2.mdx

* Update step-2.mdx

* Update src/pages/developing/react-tutorial/step-3.mdx

* Update src/pages/developing/react-tutorial/step-3.mdx

* Update src/pages/developing/react-tutorial/step-4.mdx

* Update src/pages/developing/react-tutorial/step-4.mdx

* Update step-3.mdx

* Update step-3.mdx

* Update step-3.mdx

* Update step-3.mdx

* Update step-3.mdx

* Update step-3.mdx

* Update step-3.mdx

* Update step-3.mdx

* Update step-4.mdx

* chore: format

* Update step-2.mdx

* Update step-1.mdx

* chore: format

---------

Co-authored-by: Andrea N. Cardona <[email protected]>
Co-authored-by: Scott Strubberg <[email protected]>

README.md

@@ -2,7 +2,9 @@
 
 ![Deployment status](https://github.com/carbon-design-system/carbon-website/workflows/Deployment%20status/badge.svg)
 
-This is the [Carbon Design System website](http://www.carbondesignsystem.com). It's built using the [gatsby-theme-carbon](https://gatsby-theme-carbon.now.sh/) with [GatsbyJS](https://www.gatsbyjs.org/).
+This is the [Carbon Design System website](http://www.carbondesignsystem.com).
+It's built using the [gatsby-theme-carbon](https://gatsby.carbondesignsystem.com/)
+with [GatsbyJS](https://www.gatsbyjs.org/).
 
 ## 📂 Structure
 
@@ -29,11 +31,14 @@ src
 - `lint:js` – lint your JavaScript files
 - `format` - run Prettier
 
-If you need more detailed information on how to set up your machine to develop locally, please take a look at our [wiki](https://github.com/carbon-design-system/carbon-website/wiki).
+If you need more detailed information on how to set up your machine to develop
+locally, please take a look at our
+[wiki](https://github.com/carbon-design-system/carbon-website/wiki).
 
 ## 🚀 Build
 
-Runing the build command generates all the files and places them in the `public` folder.
+Running the build command generates all the files and places them in the
+`public` folder.
 
 ```
 yarn build

src/pages/all-about-carbon/what-is-carbon.mdx

@@ -112,9 +112,10 @@ work and contribute patterns back to the system.
 ### We support adoption
 
 **We conduct training classes, run meetups, and offer certifications.** We offer
-tutorials in Angular, React, and Vue. We run [meetups](/whats-happening/meetups)
-and design reviews on a regular basis. We're also available to teach at
-conferences, bootcamp labs, and wherever else we're needed.
+tutorials in Angular, React using Next.js, and Vue. We run
+[meetups](/whats-happening/meetups) and design reviews on a regular basis. We're
+also available to teach at conferences, bootcamp labs, and wherever else we're
+needed.
 
 **We engage the community.** We strive to be one of the world's best design
 systems and we’re

src/pages/all-about-carbon/who-uses-carbon.mdx

@@ -133,7 +133,7 @@ Here are some ways developers can begin engaging with Carbon.
   [design principles](https://www.ibm.com/design/language/).
 
 - Check out a tutorial in your framework of choice
-  ([React](/developing/react-tutorial/overview/),
+  ([React using Next.js](/developing/react-tutorial/overview/),
   [Angular (community)](/developing/angular-tutorial/overview/) or
   [Vue (community)](/developing/vue-tutorial/overview/)).
 

src/pages/developing/frameworks/react.mdx

@@ -80,7 +80,7 @@ Design System.
 
 Components require the use of a build pipeline in your project. This could be in
 the form of a bundler, framework, or other build tool. Some examples include
-NextJS, Vite, Parcel, and Webpack. A comprehensive list is available in the
+Next.js, Vite, Parcel, and Webpack. A comprehensive list is available in the
 [react documentation](https://react.dev/learn/start-a-new-react-project).
 
 To use a component, you can import it directly from the package:
@@ -122,7 +122,7 @@ A full list of available icons is provided in the
 [icon library](/guidelines/icons/library/).
 
 For a more in depth introduction to using `@carbon/react` in a webpack-based
-app, [check out our react tutorial](/developing/react-tutorial/overview/).
+app, [check out our React tutorial](/developing/react-tutorial/overview/).
 
 ## Development
 

src/pages/developing/get-started.mdx

@@ -41,14 +41,15 @@ as well as our GitHub repos and Storybooks for your framework of choice.
 
 ### Take a tutorial
 
-We offer tutorials in Angular, React, and Vue to guide you in creating an app
-with the Carbon Design System. We’ll teach you the ins and outs of using Carbon
-components, and introduce web development best practices along the way.
+We offer tutorials in Angular, React using Next.js, and Vue to guide you in
+creating an app with the Carbon Design System. We’ll teach you the ins and outs
+of using Carbon components, and introduce web development best practices along
+the way.
 
 <Row className="resource-card-group">
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
-    subTitle="React tutorial"
+    subTitle="React tutorial using Next.js"
     href="/developing/react-tutorial/overview"
     >
 

src/pages/developing/react-tutorial/faq.mdx

@@ -1,8 +1,8 @@
 ---
 title: FAQs
 description:
-  Welcome to Carbon! This tutorial will guide you in creating a React app with
-  the Carbon Design System.
+  Welcome to Carbon! This tutorial will guide you in creating a React app using
+  Next.js with the Carbon Design System.
 tabs:
   [
     'Overview',
@@ -16,23 +16,6 @@ tabs:
   ]
 ---
 
-### I am getting an error that says <span className='tutorial-faq-header-code'>`failed to find manifest for cf`</span>. What do I do?
-
-- The 5th step assumes your spaces are in the US South region. To successfully
-  deploy, you might need to update the region code (e.g.
-  `api.[REGION].cf.cloud.ibm.com`) to the region where your spaces were created,
-  or create a space in the US South region.
-
-- If you don't have an org, create one
-  [here](https://cloud.ibm.com/account/cloud-foundry).
-  - In the top nav go to Manage > Account > Account resources > Cloud Foundry
-    orgs
-  - The name you give it doesn't matter, just take note of the region you
-    select, and use that region's API endpoint (e.g.
-    `api.[REGION].cf.cloud.ibm.com`)
-  - Find regions and endpoints
-    [here](https://cloud.ibm.com/docs/cloud-foundry-public?topic=cloud-foundry-public-endpoints).
-
 ### I am getting an error that says <span className='tutorial-faq-header-code'>`yarn lockfile missing`</span>. How do I fix this?
 
 - This error can occur when the `yarn.lock` file is either missing or differs
@@ -48,16 +31,6 @@ tabs:
   and push up any changes. If this still does not work, ensure your `yarn.lock`
   file matches the one at the start of the tutorial step
 
-### When will my PR be reviewed?
-
-- If your PR is passing, it will automatically get approved and closed by a bot.
-  After it's closed, you can move on to the next step.
-
-- If your PR is failing, try out the troubleshooting tips on this page first to
-  fix it. If it's still failing, reach out for help in our slack channel
-  `#carbon-react` or tag `@carbon-design-system/developers` in a comment on your
-  PR for help.
-
 ### How can I show others my completion status?
 
 - Proof of your completion of the tutorial can be seen by filtering the PR list
@@ -67,12 +40,8 @@ tabs:
   your username. Replace `YOURUSERNAMEHERE` with your username in the following
   link:
 
-  - https://github.com/carbon-design-system/carbon-tutorial/pulls?q=author%3AYOURUSERNAMEHERE
-
-### Other troubleshooting tips
+  - https://github.com/carbon-design-system/carbon-tutorial-nextjs/pulls?q=author%3AYOURUSERNAMEHERE
 
-- We updated the `react-scripts` dependency to `v5.0.1`. Pull from `upstream`
-  and run `yarn` or `npm install` to update your remote branch.
-- You no longer need the `.env` with the updated `react-scripts` dependency. If
-  you are up to date, you can delete that file (previously at the root level).
-- Run `yarn format` and commit any changes made.
+- It can also be demonstrated by deploying your app. Please see further
+  documentation
+  [here](/developing/react-tutorial/step-5#build-for-production-and-deploy).

src/pages/developing/react-tutorial/overview.mdx

@@ -1,8 +1,8 @@
 ---
 title: Tutorial overview
 description:
-  Welcome to Carbon! This tutorial will guide you in creating a React app with
-  the Carbon Design System.
+  Welcome to Carbon! This tutorial will guide you in creating a React app using
+  Next.js with the Carbon Design System.
 tabs:
   [
     'Overview',
@@ -20,9 +20,10 @@ import Preview from 'components/Preview';
 
 <PageDescription>
 
-Welcome to Carbon! This tutorial will guide you in creating a React app with the
-Carbon Design System. We'll teach you the ins and outs of using Carbon
-components, while introducing web development best practices along the way.
+Welcome to Carbon! This tutorial will guide you in creating a React app using
+Next.js with the Carbon Design System. We'll teach you the ins and outs of using
+Carbon components, while introducing web development best practices along the
+way.
 
 </PageDescription>
 
@@ -34,13 +35,13 @@ components, while introducing web development best practices along the way.
 
 </AnchorLinks>
 
-Here's a [preview](https://v11-react-step-5--carbon-tutorial.netlify.app) of
-what you will build:
+Here's a [preview](https://carbon-tutorial-nextjs.vercel.app/) of what you will
+build:
 
 <Preview
   height="400"
   title="Carbon Tutorial"
-  src="https://v11-react-step-5--carbon-tutorial.netlify.app"
+  src="https://carbon-tutorial-nextjs.vercel.app/"
   frameborder="no"
   allowtransparency="true"
   allowfullscreen="true"
@@ -57,11 +58,20 @@ page.
 
 ### React
 
-This is a web development tutorial that uses the Carbon React components. If
-you're just getting started with React and enjoy learning-by-doing, check out
-the official React [intro tutorial](https://reactjs.org/tutorial/tutorial.html).
-You'll want to supplement that with their
-[step-by-step guide](https://reactjs.org/docs/hello-world.html).
+This is a web development tutorial that uses the Carbon React components built
+with [Next.js](https://nextjs.org/). If you're just getting started with React
+and enjoy learning-by-doing, check out the official React
+[intro tutorial](https://react.dev/learn/tutorial-tic-tac-toe). You'll want to
+supplement that with their
+[step-by-step guide](https://react.dev/blog/2023/03/16/introducing-react-dev).
+
+### Next.js
+
+As mentioned, we will be building this app using Next.js. Don't worry, no prior
+knowledge about Next.js will be needed. Check out the official Next.js
+[introduction](https://nextjs.org/learn/foundations/about-nextjs). If you want
+to learn more you can supplement that with their
+[step-by-step tutorial](https://nextjs.org/learn/basics/create-nextjs-app).
 
 ### ES6/ES2015
 
@@ -99,5 +109,5 @@ any step and take it from there.
    - Populate the data table with an external data source.
 4. [**Creating components**](/developing/react-tutorial/step-4)
    - Extend Carbon by creating your own components.
-5. [**Deploying to Github Pages**](/developing/react-tutorial/step-5)
+5. [**Deploying**](/developing/react-tutorial/step-5)
    - Build and host your app in a production environment.