Support plan for Next.js app router #4069

meiyingqishi · 2023-12-16T19:14:39Z

Is there a plan for Primer Design System components to support Next.js?

Using client-side components on Next.js has become quite painful.

broccolinisoup · 2023-12-19T00:29:54Z

Hi @meiyingqishi 👋 We support Next.js and you can also access our internal example of Next.js to see how we set up the project and utilize Primer React components there. I'm going to go ahead and close this issue but please report back if you are having any specific issues with compatibility of our components with Next.js.

meiyingqishi · 2023-12-19T18:16:55Z

Thank you for your response. @broccolinisoup

The example you provided is from a Next.js pages project. The current mainstream approach is using Next.js app projects, and the situation has changed. Components are now defaulting to server-side components, while the Primer Design System components are client-side components. When the implementation of a component involves the use of React's client-side APIs, such as hooks like useState, it will result in runtime errors (Server Error
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component).
The solution is to create a separate file and add 'use client' at the beginning of the file. Then, import this file in the page.tsx where it is used. However, creating a file like this for each component can become tedious and cumbersome.
I have reviewed the official documentation for the Primer Design System and did not find such a description or solution. My question is, do you have any plans to default to adding 'use client' in the component code files in the future? This would help alleviate many potential issues when using the components in the future.

broccolinisoup · 2023-12-21T06:38:09Z

Hi @meiyingqishi 👋 Sorry when I read the issue, it didn't occur to me that you are talking about the new app router and React Server Components! I appreciate you provided details. I am chatting about this with my team to see how we can support it. I'll re-open the issue and rename it to "Support for Next.js app router" and you can subscribe to this issue to get updates on the support. Thanks for bringing it up and raising the issue.

broccolinisoup · 2024-01-15T23:57:28Z

Hi @meiyingqishi, we have another issue opened that dives deeper into the server components, feel free to have a read.

We also have a draft PR that addresses the issue you mentioned here.

joshblack · 2024-01-26T19:06:03Z

Hi there! 👋 Just wanted to follow up on this now that: #4128 is merged and available in v36.6.0

Components should be directly usable from @primer/react without requiring a 'use client' directive on the page or in components that call it when using app router with Next.js.

Going to close this out but feel free to leave a comment or provide any feedback if this is not working as expected!

meiyingqishi · 2024-01-26T20:46:32Z

Thank you! It worked.

peterbe · 2024-02-23T19:16:14Z

👋 Pardon the ignorance. But how does one use it though?

I followed https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components to get styled-components into my App router based Next.js v14 app.
(Note; those instructions are for styled-components@6 which I don't think @primer/react is compatible with)

Now that there's no longer an _app.tsx, where do you put the...

<ThemeProvider>
  <BaseStyles>
    ...
  </BaseStyles>
</ThemeProvider>

If someone has an example that combines @primer/react with next@14 that uses the App router, that would be great. I can't get it to work.

meiyingqishi · 2024-02-24T12:02:49Z

Create and initialize the front-end project (primer-app) in terminal by pnpm: pn create next-app;
Navigate to the directory: cd primer-app;
Add dependencies: pn add @primer/react @primer/css @primer/octicons-react styled-components@^5;
Import the project into vscode：code .;
Modify layout.tsx:

import {
  BaseStyles,
  ThemeProvider,
} from "@primer/react";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          <BaseStyles>{children}</BaseStyles>
        </ThemeProvider>
      </body>
    </html>
  );
}

Modify page.tsx:

import { 
  Button, 
} from "@primer/react";

export default function Home() {
  return (
    <main>
      <Button>Hello Button</Button>
    </main>
  );
}

Run in vs code terminal: pn dev;
View in browser: http://localhost:3000.

peterbe · 2024-02-26T13:30:16Z

@meiyingqishi That doesn't solve the SSR problem. You get CSS-in-JS where the styling is injected at runtime, on the client.

You actually get pretty far with:

import StyledComponentsRegistry from "@/lib/registry";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <StyledComponentsRegistry>
          <ThemeProvider>
            <BaseStyles>
              <Inner>{children}</Inner>
            </BaseStyles>
          </ThemeProvider>
        </StyledComponentsRegistry>
      </body>
    </html>
  );
}

It works. But I get very strange warnings in development mode that I don't understand.

joshblack · 2024-02-26T22:58:54Z

Hi there, @peterbe! We have an App Router example over at: https://github.com/primer/react/tree/main/examples/app-router if it's helpful (there is one change that needs to happen from #4307)

Would love to hear any feedback you have for that example and if it works or doesn't work for your use-case. I believe it should handle the SSR case for styles using the guide from Next.js but let me know if there are any issues!

peterbe · 2024-02-27T16:18:12Z

Hi there, @peterbe! We have an App Router example over at: https://github.com/primer/react/tree/main/examples/app-router if it's helpful (there is one change that needs to happen from #4307)

Yay!

Now I can't even remember how I stumbled into https://github.com/primer/react/tree/main/examples/nextjs in the first place. Perhaps by a Google search??

Would love to hear any feedback you have for that example and if it works or doesn't work for your use-case. I believe it should handle the SSR case for styles using the guide from Next.js but let me know if there are any issues!

I got things working. SSR and all. Used your draft from #4307 and not a warning or error in sight.

What tripped me up, and can be seen in my screenshot above, was that the link on https://primer.style/react/getting-started#static-css-rendering to styled-components made me think I had to use styled-components@6 when it's styled-components@5 that is a must.

meiyingqishi · 2024-04-06T19:44:59Z

Hi @joshblack ,

I accidentally tried the primer design system again and found there's still an issue. When using individual components like Button, there are no problems. However, errors occur when using composite components (involving child components, using a period), for example:

<ActionList>
    <ActionList.Item>Copy link</ActionList.Item>
    <ActionList.Item>Quote reply</ActionList.Item>
    <ActionList.Item>Edit comment</ActionList.Item>
</ActionList>

The issue lies with the ActionList.Item here. I've encountered this problem while using other components (such as react-bootstrap) as well. Their solution is to add additional components (for example: ActionListItem).

primer-issue-triage-primer bot added the react label Dec 16, 2023

lesliecdubs assigned broccolinisoup Dec 18, 2023

broccolinisoup closed this as not planned Won't fix, can't repro, duplicate, stale Dec 19, 2023

broccolinisoup reopened this Dec 21, 2023

broccolinisoup changed the title ~~Support plan for Next.js ？~~ Support plan for Next.js app router Dec 21, 2023

broccolinisoup mentioned this issue Jan 15, 2024

feat(bundle): add "use client" directive to entrypoints #4128

Merged

1 task

broccolinisoup removed their assignment Jan 15, 2024

joshblack closed this as completed Jan 26, 2024

meiyingqishi mentioned this issue Feb 29, 2024

Support NextJS 13 /app directory server-side rendering? react-bootstrap/react-bootstrap#6475

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support plan for Next.js app router #4069

Support plan for Next.js app router #4069

meiyingqishi commented Dec 16, 2023

broccolinisoup commented Dec 19, 2023

meiyingqishi commented Dec 19, 2023

broccolinisoup commented Dec 21, 2023

broccolinisoup commented Jan 15, 2024

joshblack commented Jan 26, 2024 •

edited

meiyingqishi commented Jan 26, 2024

peterbe commented Feb 23, 2024

meiyingqishi commented Feb 24, 2024 •

edited

peterbe commented Feb 26, 2024

joshblack commented Feb 26, 2024

peterbe commented Feb 27, 2024

meiyingqishi commented Apr 6, 2024

Support plan for Next.js app router #4069

Support plan for Next.js app router #4069

Comments

meiyingqishi commented Dec 16, 2023

broccolinisoup commented Dec 19, 2023

meiyingqishi commented Dec 19, 2023

broccolinisoup commented Dec 21, 2023

broccolinisoup commented Jan 15, 2024

joshblack commented Jan 26, 2024 • edited

meiyingqishi commented Jan 26, 2024

peterbe commented Feb 23, 2024

meiyingqishi commented Feb 24, 2024 • edited

peterbe commented Feb 26, 2024

joshblack commented Feb 26, 2024

peterbe commented Feb 27, 2024

meiyingqishi commented Apr 6, 2024

joshblack commented Jan 26, 2024 •

edited

meiyingqishi commented Feb 24, 2024 •

edited