-
Notifications
You must be signed in to change notification settings - Fork 53
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat: POC Next 13 global sections #2299
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
@@ -0,0 +1,174 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,36 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,56 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,42 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,120 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,144 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,17 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,95 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,16 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,16 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,29 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,116 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component - Temporary page code
@@ -0,0 +1,36 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,67 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -0,0 +1,11 @@ | |||
'use client' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Client Component
@@ -1,5 +1,6 @@ | |||
/// <reference types="next" /> | |||
/// <reference types="next/image-types/global" /> | |||
/// <reference types="next/navigation-types/compat/navigation" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
next automatically generate this
// Make css order works as expected in Next 13. See https://github.com/vercel/next.js/issues/51030#issuecomment-2005254907 | ||
config.plugins.push( | ||
new webpack.BannerPlugin({ | ||
banner: '@layer base, components, theme;', | ||
test: /\.css$/, | ||
raw: true, | ||
entryOnly: false, | ||
}) | ||
) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix styles order issue. see the comment
"name": "next" | ||
} | ||
], | ||
"strictNullChecks": false |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
needed to make Section Override work as previously.
SearchInput as UISearchInput, | ||
SearchInputField as UISearchInputField, | ||
} from '@faststore/ui' | ||
import { useRouter } from 'next/navigation' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
'next/navigation' from next 13 instead of 'next/router'
/* TODO: we should use DraftMode instead of preview mode in Next 13 */ | ||
} | ||
const { sections } = await getPage<PageContentType>({ | ||
contentType: GLOBAL_SECTIONS_CONTENT_TYPE, | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is a task in our backlog to use draft mode instead of previewData (hCMS).
{/* TODO: we should use metadata api from Next 13 */} | ||
{/* <DefaultSeo norobots={storeConfig.experimental.noRobots} /> */} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
DefaultSeo doesn't work as expected in Next 13. We also have a task to use the native SEO (Metadata) API, instead.
// BannerText: { | ||
// Section: typeof BannerText | ||
// components: { | ||
// BannerText: ComponentOverrideDefinition<BannerTextProps, BannerTextProps> | ||
// BannerTextContent: ComponentOverrideDefinition< | ||
// BannerTextContentProps, | ||
// BannerTextContentProps | ||
// > | ||
// } | ||
// } | ||
// Breadcrumb: { | ||
// Section: typeof Breadcrumb | ||
// components: { | ||
// Breadcrumb: ComponentOverrideDefinition<BreadcrumbProps, BreadcrumbProps> | ||
// Icon: ComponentOverrideDefinition<IconProps, IconProps> | ||
// } | ||
// } | ||
// EmptyState: { | ||
// Section: typeof EmptyState | ||
// components: { | ||
// EmptyState: ComponentOverrideDefinition< | ||
// PropsWithChildren<EmptyStateProps>, | ||
// EmptyStateProps | ||
// > | ||
// } | ||
// } | ||
// Hero: { | ||
// Section: typeof Hero | ||
// components: { | ||
// Hero: ComponentOverrideDefinition<HeroProps, HeroProps> | ||
// HeroImage: ComponentOverrideDefinition<HeroImageProps, HeroImageProps> | ||
// HeroHeader: ComponentOverrideDefinition<HeroHeaderProps, HeroHeaderProps> | ||
// } | ||
// } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should uncomment these lines as we migrate these sections into the pages.
/** This type wizardry is here because the props won't behave correctly if nothing is done */ | ||
// @ts-ignore |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ts-ignore was needed to make the SectionOverride works as previously.
What's the purpose of this pull request?
This PR was used to make experiments (POC) while migrating the global section to Next 13.
Along the way, we created and adjusted some tasks and added comments to guide the migration.
This PR is gigantic because most components were moved from the src folder to the app folder to make it Server Components, with a few updates to make them use the updated path.
As the Next complains about client components, we added the 'use client' to some components.
Also, other adjusts were made needed, as you can see in this PR
I suggest you see the comments below, which are linked to the files.