Feat: Next 13 - SFS-1028 #2346
Open
Feat: Next 13 - SFS-1028 #2346
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR aims to: - [x] add the tsconfig needed to run Next 13. It also set `"strictNullChecks": false` to make the Section Override v2 API work as previously. - [x] Fix styles order problem by adding webpack config in next.config.js. See vercel/next.js#51030 (comment) - [x] adds the initial prefix folder, root layout and initial page layout run locally and you should see the initial structure under: http://localhost:3000/fs-next-update <!--- Add a link to a deploy preview from `gatsby.store` AND `nextjs.store` with this branch being used. ---> <!--- Tip: You can get an installable version of this branch from the CodeSandbox generated when this PR is created. ---> Next 13 file conventions https://nextjs.org/docs/app/api-reference/file-conventions/layout CSS order issues: [[NEXT-1308] Css is imported multiple times and out of order in /app dir · Issue #51030 · vercel/next.js](vercel/next.js#51030 (comment)) [Verify CSS import ordering · Issue #16630 · vercel/next.js](vercel/next.js#16630) [CSS "@import <file> layer()" isn't working · Issue #55763 · vercel/next.js](vercel/next.js#55763) [[NEXT-1308] Css is imported multiple times and out of order in /app dir · Issue #51030 · vercel/next.js](vercel/next.js#51030 (comment)) strictNullChecks vercel/next.js#39942 https://www.typescriptlang.org/tsconfig/#strictNullChecks
Depends on - #2298 This PR aims to create the root `layout.tsx` and bring the components from the `src` folder to the `app` folder. Most of the changes from this PR are related to the path change to the `app` folder. But there are also new 'use clients' added to some components. The sections should be implemented/moved in other PR's related [to another JIRA task](https://vtex-dev.atlassian.net/browse/SFS-880). Make sure that the older pages are working as expected and also the `http://localhost:3000/fs-next-update` is rendering (blank) without errors. TBD https://nextjs.org/docs/app/api-reference/file-conventions/layout
Depends on - #2298 - #2300 This PR aims to migrate to the new way to fetch data using Next 13. instead of `getServerStaticProps`, now we fetch the data directly from the root `layout.tsx`. locally, add a console log after the fetch function. https://nextjs.org/docs/app/building-your-application/data-fetching
This PR intends to set the default SEO metatags for the root `layout.tsx` file. - Run the local server (`yarn turbo run dev --filter=@faststore/core`); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering (blank) without errors and both `<meta "robots">` and `<meta "googlebot">` exist with the `noindex,nofollow` tags. - https://nextjs.org/learn-pages-router/seo/crawling-and-indexing/metatags - https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead - https://nextjs.org/docs/app/api-reference/functions/generate-metadata#robots
This PR intends to introduce `next/font` built-in feature to the project (`app` directory). The `babelrc.js` config file needed to be removed in favor of `next/font` usage, [it's mandatory](https://nextjs.org/docs/messages/babel-font-loader-conflict). Next.js requires the use of its own compiler (SWC) config, so for now we still don't have the necessary GraphQL Codegen plugin to replace the `@graphql-codegen/client-preset` being loaded in the Babel config file, as the existing one ([`@graphql-codegen/client-preset-swc-plugin`](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#swc-plugin)) has a bug that hasn't been solved yet (see [here](dotansimha/graphql-code-generator#9753) and [here](dotansimha/graphql-code-generator#9450). Also, right now we are just introducing the feature, but we will have to support local fonts and font override later in other tasks. - Run the local server (`yarn turbo run dev --filter=@faststore/core`); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with some text on the top of the page and without errors. - https://nextjs.org/blog/next-13#nextfont - https://nextjs.org/docs/app/api-reference/components/font#css-variables - https://nextjs.org/docs/app/building-your-application/optimizing/fonts
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
eduardoformiga
added
breaking changes
eduardoformiga
requested review from
hellofanny and
emersonlaurentino
and removed request for
a team
…2340) ## What's the purpose of this pull request? This PR aims to add the initial structure from the global sections and migrate the Alert section from the pages router to the app router (next 13). Some 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. <img width="845" alt="Screenshot 2024-06-10 at 19 26 49" src="https://github.com/vtex/faststore/assets/11325562/c242fdb4-b07f-4ab4-8b56-148e72208507"> ## How to test it? - Run the local server (`yarn dev` in core package); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with thew `Alert` section on the top of the page and without errors. ### Starters Deploy Preview - vtex-sites/starter.store#469
|
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. |
eduardoformiga
force-pushed
the
feat/next-13
branch
from
a02bb14
to
2914fb4
Compare
## What's the purpose of this pull request? Migration of the `Footer` section from the pages router to the app router (Next 13). ## How it works? <img width="720" alt="Screenshot 2024-06-11 at 16 16 02" src="https://github.com/vtex/faststore/assets/19983991/fefd2862-ecfa-4881-8070-d4b13a353216"> ## How to test it? - Run `yarn dev` - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with the `Footer` section on the bottom of the page and without errors. ### Starters Deploy Preview <!--- Add a link to a deploy preview from `gatsby.store` AND `nextjs.store` with this branch being used. ---> <!--- Tip: You can get an installable version of this branch from the CodeSandbox generated when this PR is created. ---> ## References - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-1020)
## What's the purpose of this pull request? This PR aims to add the initial structure from the global sections and migrate the `Navbar` section from the pages router to the app router (next 13) along with its related components (Search). Some 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. <img width="1289" alt="Screenshot 2024-06-10 at 20 28 43" src="https://github.com/vtex/faststore/assets/11325562/88bb6147-6813-4d5c-a881-10bd666469f3"> ## How to test it? - Run the local server (`yarn dev` in core package); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with thew `Navbar` section on the top of the page and without errors. ### Starters Deploy Preview - vtex-sites/starter.store#470
## What's the purpose of this pull request? This PR aims to migrate the `Toast` from the pages router to the app router (next 13). ## How to test it? - Run the local server (`yarn dev` in core package); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with thew `Toast` section on the top of the page and without errors. - You can add a wrong zip code and a lot of products to make sure the `Toast` will appear. <img width="1019" alt="Screenshot 2024-06-13 at 18 04 58" src="https://github.com/vtex/faststore/assets/11325562/b378527f-4dc5-4619-a9b6-f2e2ac5192f0"> <img width="1036" alt="Screenshot 2024-06-13 at 18 05 14" src="https://github.com/vtex/faststore/assets/11325562/ba3833a7-fc66-4df5-b69b-59b3c9bec0b4">
…n - SFS-1017 SFS-1013 (#2349) ## What's the purpose of this pull request? This PR aims to migrate the `RegionBar` and `RegionModal` from the pages router to the app router (next 13). ## How to test it? - Run the local server (`yarn dev` in core package); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with thew `RegionBar` section on the top of the page and without errors. <img width="508" alt="Screenshot 2024-06-13 at 18 46 48" src="https://github.com/vtex/faststore/assets/11325562/9c0e0fb5-ab15-4348-a194-70d09602c7b2"> <img width="258" alt="Screenshot 2024-06-13 at 18 54 20" src="https://github.com/vtex/faststore/assets/11325562/8520c94b-3454-4e6f-aa84-8a8cd1ff3155"> <img width="508" alt="Screenshot 2024-06-13 at 18 47 05" src="https://github.com/vtex/faststore/assets/11325562/655ed175-9491-48ef-8471-4a8852b9412e">
## What's the purpose of this pull request? This PR aims to update the Next 13 feature branch with the changes that come from the main branch JIRA task: https://vtex-dev.atlassian.net/browse/SFS-1207 --------- Co-authored-by: vtexgithubbot <[email protected]> Co-authored-by: Beatriz Maselli <[email protected]> Co-authored-by: Guilherme Carvalho <[email protected]> Co-authored-by: Arthur Andrade <[email protected]> Co-authored-by: Arthur Andrade <[email protected]> Co-authored-by: rayssamfreitas <[email protected]> Co-authored-by: Luiz Nickel <[email protected]> Co-authored-by: Larícia Mota <[email protected]> Co-authored-by: graham <[email protected]> Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Mariana Caetano Pereira <[email protected]> Co-authored-by: Christian Mutti <[email protected]> Co-authored-by: Lucas Vyskubenko <[email protected]> Co-authored-by: Lucas Feijó <[email protected]> Co-authored-by: Renata Motta <[email protected]> Co-authored-by: ataideverton <[email protected]> Co-authored-by: Everton Ataide <[email protected]> Co-authored-by: Pedro Soares <[email protected]> Co-authored-by: Pedro Soares <[email protected]>
) ## What's the purpose of this pull request? This PR starts migrating the home to the new route structure of Next 13 (App Router). - Create a `page.tex` file inside `fs-next-update` folder with the basic **Home** structure - Fetch the home data from **cms**. - Add the **Hero** section https://vtex-dev.atlassian.net/browse/SFS-817 https://vtex-dev.atlassian.net/browse/SFS-809 https://vtex-dev.atlassian.net/browse/SFS-1199 ## How to test it? You can access the path: **/fs-next-update** and check if the Hero is rendered.
## What's the purpose of this pull request? Migration of the `BannerText` section from the pages router to the app router (Next 13). ## How it works?  ## How to test it? 1. Run `yarn dev` 2. Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); 3. Make sure `/fs-next-update` is rendering with the `BannerText` section without errors. ### Starters Deploy Preview <!--- Add a link to a deploy preview from `gatsby.store` AND `nextjs.store` with this branch being used. ---> <!--- Tip: You can get an installable version of this branch from the CodeSandbox generated when this PR is created. ---> ## References - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-1203)
## What's the purpose of this pull request? Migration of the ProductShelf section from the pages router to the app router (Next 13). ## How it works? <img width="1512" alt="Captura de Tela 2024-08-15 às 10 27 30" src="https://github.com/user-attachments/assets/d70f674c-a634-47a2-b03c-222e94147b86"> ## How to test it? How to test it? Run `yarn dev` and inside `packages/core` run `yarn build && yarn serve` Make sure that all the current pages are working as expected (/, /office and some /<slug>/p); Make sure /fs-next-update is rendering with the ProductShelf section without errors.
## What's the purpose of this pull request? Migration of the `Incentives` section from the pages router to the app router (Next 13). ## How it works?  ## How to test it? 1. Run `yarn dev` 2. Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); 3. Make sure `/fs-next-update` is rendering with the `Incentives` section without errors. ### Starters Deploy Preview <!--- Add a link to a deploy preview from `gatsby.store` AND `nextjs.store` with this branch being used. ---> <!--- Tip: You can get an installable version of this branch from the CodeSandbox generated when this PR is created. ---> ## References - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-1200)
## What's the purpose of this pull request? Migrate Hero Section to `app folder`. The hero was already migrating, only its dependencies were moved to the app folder, except the Section component that we can migrate after finishing all the sections. ## How to test it? ``` Run yarn dev Make sure that all the current pages are working as expected (/, /office and some /<slug>/p); Make sure /fs-next-update is rendering with the Hero section without errors. ```
## What's the purpose of this pull request? Migrate Newsletter section to app folder ## How it works?  <!--- Tell us the role of the new feature, or component, in its context. ---> ## How to test it? Run yarn dev Make sure that all the current pages are working as expected (/, /office and some /<slug>/p); Make sure /fs-next-update is rendering with the Hero section without errors.
## What's the purpose of this pull request? Move ProductTitles section to app folder ## How it works?  ### How to test it? ``` Run yarn dev Make sure that all the current pages are working as expected (/, /office and some /<slug>/p); Make sure /fs-next-update is rendering with the ProductTitles section without errors. ```
## What's the purpose of this pull request? Migrate the `BannerNewsletter` section to the app folder. ## How it works?  ## How to test it? Add the BannerNewsletter section in the home: https://storeframework.myvtex.com/admin/new-cms/faststore/home/edit/4662a615-63d8-11ef-b37f-92769114c624 Build the app again e see the section.
## What's the purpose of this pull request? Using the next metadata to define the SEO tags. |before: NextSeo | After: fs-next-update | |-|-| |<img width="513" alt="image" src="https://github.com/user-attachments/assets/bdeef211-d9eb-4fb8-9015-7566eb9c1659">|<img width="468" alt="image" src="https://github.com/user-attachments/assets/7c66bbea-9e1a-4cc8-81b7-1a24bc79c971">| todo: - [ ] check duplicate tags related issue: vercel/next.js#63489 It didn't work for me, I couldn't fix it :/ - [ ] after updating the `feat/next-13` branch with `main`, we need to consider #2417 changes Regarding the JSON-LD, I added it as recommended in the [documentation](https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld): by rendering the structured data as a <script> tag. I've checked that the generated schema was the same as before and still valid. <img width="1520" alt="image" src="https://github.com/user-attachments/assets/2c01efd0-0110-43c5-b95c-655e24cf0167"> |before: SiteLinksSearchBoxJsonLd | After: fs-next-update | |-|-| |<img width="909" alt="image" src="https://github.com/user-attachments/assets/fda08173-3efa-4317-ab50-d52ca8e640c4">|<img width="916" alt="image" src="https://github.com/user-attachments/assets/a1b2af2e-bf53-4a61-9333-c16ba7ffd76b">| **Question/Curiosity**: Does anyone know how this is being used? ## How to test it? Navigate to packages/core, run `yarn dev` **Metatags** 1. Open the [homepage](https://starter.vtex.app/) and inspect the page, if using chrome, in the `Elements` tab, search for `meta`. 2. In another tab open the homepage: localhost:3000/fs-next-update , do the same. Inspect and search for `meta`. Compare the tags, you should be able to see all the tags in the stater here. ___ **JsonLd** 1. Open the [homepage](https://starter.vtex.app/) and inspect the page, if using chrome, in the `Elements` tab, search for `SearchAction`. <img width="200" alt="image" src="https://github.com/user-attachments/assets/9ee2f3d8-cbb4-4183-a979-cc49ece55194"> 2. In another tab open the homepage: localhost:3000/fs-next-update , do the same. Inspect and search for `SearchAction`. Compare the script, it should the same. ## References - [SFS 815](https://vtex-dev.atlassian.net/browse/SFS-815?atlOrigin=eyJpIjoiZDMxYTJjYzY0MWZiNDAxZjllYWM1YTVkYWJmMmQ3MjEiLCJwIjoiaiJ9) - [Nextjs Optimizing Metadata]( https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's the purpose of this pull request?
This PR aims to group all features related to Next 13. The branch from this PR must be the base branch for all Next 13 related PRs.