How-to Magento with Next.jsvol 1. Getting StartedCarlos A. Cabrera @fnhipster | Solutions Architect & FEDSolutions Innovation

“I'll create a storefront while NOT learning anything about how Magento works.”

Famous last words.

Why Next.js?

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Street Cred

§ Zero Configuration. Auto code splitting, compilation and bundling. Automatic TypeScript support.

§ File-system Routing. Every component in the `pages` directory is a route.

§ Hybrid Pre-rendering. Build time with (SSG ) or request time (SSR).

§ Incremental SSG. Update existing pages by re-rendering them in the background as traffic comes in.

§ Static Exporting. It just happens. One command to build.

§ Fully Extensible. Complete control over Babel and Webpack. with Next-plugins.

§ Built-in CSS Support. CSS Modules out of the box, but it also works with other styling solutions.

§ Ready for Production. Optimized for a smaller build size.

Getting Started with Next.js

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Getting Started with Next.js

https://nextjs.org/docs/getting-started

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Getting Started with Next.js

https://github.com/vercel/next.js/tree/canary/examples

Getting Started with Magento & Next.js

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Getting Started with Next.js + Magento

https://github.com/fnhipster/magento-with-next-sample

©2020 Adobe. All Rights Reserved. Adobe Confidential.

MVP Dependencies

https://github.com/fnhipster/magento-with-next-sample/blob/main/package.json

Next.js (React) Magento GraphQL+ = 🤑🤑🤑

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Extending Next.js

https://github.com/fnhipster/magento-with-next-sample/blob/main/next.config.js

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Proxy API

https://github.com/fnhipster/magento-with-next-sample/blob/main/pages/api/proxy.js

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Next.js Built-in Components

https://github.com/fnhipster/magento-with-next-sample/blob/main/components/Category/Category.js

©2020 Adobe. All Rights Reserved. Adobe Confidential.

To SSG, or to SSR, that is the question.

https://github.com/fnhipster/magento-with-next-sample/blob/main/pages/index.js

getServerSideProps

©2020 Adobe. All Rights Reserved. Adobe Confidential.

Routing a.k.a. Pages

§ pages/

§ api/proxy.js api end-point that proxy our front-end request to our Magento instance.

§ _app.js custom Next App container for our application. Includes, global.css and ApolloProvider

§ _url_resolver.js check the requested URL with Magento and resolve the content-type

§ PRODUCT

§ CATEGORY

§ CMS_PAGE

§ index.js our home page.