[NextJS Template] Investigate upgrade to NextJS 11

[jeffchew]

The problem

More users may be interested in taking advantage of the latest version of NextJS when starting a new project with Carbon for IBM.com. It was just announced that NextJS 11 has been released:

https://nextjs.org/blog/next-11

The solution

Upgrade the NextJS template to v11

Additional information

• Should check if there are any migration steps: https://github.com/vercel/next.js/blob/canary/docs/upgrading.md
• Check to see if there are any new features we should be taking advantage of
• React 17 is the minimum requirement for Next 11 https://nextjs.org/docs/messages/react-version

[jeffchew]

Fortunately we are able to leverage a lot more out-of-the-box functionality in NextJS 11. However, one of the questions that has come up now is how to handle non-global CSS imports, as currently those are being pulled in on the page level. The recommendation from NextJS team is to move to CSS modules. Will discuss with the team on the next steps and what this would look like when upgrading.

[jeffchew]

This is iceboxed for now, as currently the blocker is the ability to pull in global css files outside of _app.js, as Carbon for IBM.com is technically considered 3rd party and is not designed to be ingested as CSS modules currently:

https://nextjs.org/docs/messages/css-global

A draft PR has been opened with most of the work completed: #62

There is also currently a discussion about allowing for global CSS, which would help as Carbon for IBM.com is technically considered a 3rd party library in this scenario: vercel/next.js#27953