From 5e0893a38f3adf9d1b400fb20c68c49d1ba65ac0 Mon Sep 17 00:00:00 2001
From: Nicholas Cunningham <ndcunningham@gmail.com>
Date: Thu, 20 Apr 2023 12:35:25 -0600
Subject: [PATCH] fix(nextjs): styled-jsx and styled-components should have
 "use client directive" (#16440)

---
 packages/next/src/generators/application/application.spec.ts   | 2 +-
 .../next/src/generators/application/files/app/page.tsx__tmpl__ | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/generators/application/application.spec.ts b/packages/next/src/generators/application/application.spec.ts
index 578150906f..43e2410cd7 100644
--- a/packages/next/src/generators/application/application.spec.ts
+++ b/packages/next/src/generators/application/application.spec.ts
@@ -401,7 +401,7 @@ describe('app', () => {
           {},
           `
           [
-            "plugin:@nx/nx/react-typescript",
+            "plugin:@nx/react-typescript",
             "next",
             "next/core-web-vitals",
           ]
diff --git a/packages/next/src/generators/application/files/app/page.tsx__tmpl__ b/packages/next/src/generators/application/files/app/page.tsx__tmpl__
index de8950f216..fe4ce590e2 100644
--- a/packages/next/src/generators/application/files/app/page.tsx__tmpl__
+++ b/packages/next/src/generators/application/files/app/page.tsx__tmpl__
@@ -1,3 +1,6 @@
+<% if (styledModule && (styledModule === 'styled-jsx' || styledModule === 'styled-components'))  {%>
+'use client';
+<% }%> 
 <% if (styledModule && styledModule !== 'styled-jsx') {
   var wrapper = 'StyledPage';
 %>import styled from '<%= styledModule %>';<% } else {