Create a NextJS example to reside in the NextJS repository

[tay1orjones]

It would be beneficial for our users and maintainers if there was an easy way to spin up a NextJS app with the latest Carbon deps included and set up.

If we create an example and submit it to the examples folder in the next.js repo under the name carbon-design-system

This will enable users to use a command like this to spin up a NextJS project using @carbon/react:

npx create-next-app --example carbon-design-system carbon-design-system-app

We may want to reuse some of the assets, layout, etc from the tutorial if/after it's updated to NextJS instead of react-scripts, carbon-design-system/carbon-tutorial#10994

[github-actions]

The Carbon team has accepted this proposal! Our team doesn’t have the cycles to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!

[Shankar-CodeJunkie]

@tay1orjones : Is this request still open ? Can I work on this issue

[tay1orjones]

Hey, I so appreciate your willingness to take this on! We just spoke about this as a team earlier today and right now we're actually going to place this idea on hold. There's lots of additional follow-on considerations that we're not able to handle right now.

[sstrubberg]

Hey @Shankar-CodeJunkie, i'm curious, what did you have in mind when the user ran the npx command to create a next app with Carbon bundled in? As in, what would the landing page look like?

[Shankar-CodeJunkie]

Hi @sstrubberg ! Apologies for late response . We can have the same landing page like what we had on Create React Template. We can also point to something different as well, may be we can come up with something very new as well.

[sstrubberg]

Hi @sstrubberg ! Apologies for late response . We can have the same landing page like what we had on Create React Template. We can also point to something different as well, may be we can come up with something very new as well.

This is great @Shankar-CodeJunkie. Let's use the same template you used for the CRA template as a starting point. Thank you for contributing to not only Carbon, but to NextJs as well! 🎉

[github-actions]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!

[Shankar-CodeJunkie]

@sstrubberg ! Thanks for your response. I will start working on this item, and keep you informed on the progress. Can you please assign this story to me . Thanks

[Shankar-CodeJunkie]

I'm working for this issue, with the goal of completing it within the next two weeks. However, the holiday season has caused it to take a backseat for the time being.

[Shankar-CodeJunkie]

Hi @sstrubberg @tay1orjones

I've completed creating the nextjs-starter using javascript and mainly re-used code from the tutorial repository , also added a theme switcher for user to explore themes provided by Carbon. We used the very same template for create-next-app as well.

npx create-next-app@latest project-name --example https://github.com/Shankar-CodeJunkie/carbon-design-system-nextjs-starter

Can I myself upload the repository under the name [carbon-design-system] on vercel repo examples

I'am also working to create a typescript starter under the name [carbon-design-system-with-typescript]

[Shankar-CodeJunkie]

Hi @sstrubberg @tay1orjones

I've also created a starter for typescript as well. You can find the repositories here

• https://github.com/Shankar-CodeJunkie/carbon-design-system-nextjs-typescript-starter
• https://github.com/Shankar-CodeJunkie/carbon-design-system-nextjs-starter

We can upload these two separate starter projects under the names [carbon-design-system] and [carbon-design-system-with-typescript] in vercel example directory.

[tay1orjones]

@Shankar-CodeJunkie sounds good to me, thank you!

[Shankar-CodeJunkie]

@tay1orjones : Can I upload those templates using my ID and if so , when can I upload it ?

[tay1orjones]

@Shankar-CodeJunkie Yes your ID is fine. You can add them to the vercel example directory/repo right now. Post the PR link to this issue and when it's merged we can close this issue. Thank you again

[Shankar-CodeJunkie]

Thanks @tay1orjones

I've created a pull request 60394 in the nextjs repository and awaiting for their review comments. I will keep you informed in the updates of that pull request.

Thank you