[Question] Just use this library as a reference to Amp with Next.js and not adding the SSR methodology that the ampreact shows. #70

MontoyaAndres · 2020-01-09T19:26:33Z

I'm just using react-amphtml to transform all the tags that amp has to Components. I'm not implementing the logic that the ampreact example has. In that case, I'm using the config that with-styled-components has. More specifically, like this:

import Document, {
  DocumentContext,
  Html,
  Head,
  Main,
  NextScript
} from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

So, my question is, I'm just using react-amphtml to use the amp tags as components, something like this:

import React from "react";
import styled from "styled-components";
import * as Amp from "react-amphtml";

const NavBar = styled.nav`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5em 2em;
  position: sticky;
  z-index: 1;
`;

const MenuIcon = styled(Amp.AmpImg)`
  &:hover {
    cursor: pointer;
  }

  @media (min-width: 768px) {
    display: none;
  }
`;

export const Layout = ({ children }) => {
  return (
    <>
      <NavBar>
        <Amp.AmpImg
          specName="default"
          alt="logo"
          width={60}
          height={30}
          src="/Icons/Diey_Logo.svg"
        />
        <MenuIcon
          specName="default"
          alt="logo"
          width={30}
          height={30}
          src="/Icons/menu.svg"
        />
      </NavBar>
      {children}
    </>
  );
};

Believing that Next.js will care all about SSR with AMP. Is this a good practice?

The text was updated successfully, but these errors were encountered:

dfrankland · 2020-01-10T08:07:51Z

From what I can tell from your code, your AMP pages won't work because you aren't adding the script tags for AMP to load. Most of the logic in ampreact is there to help load the boilerplate required for AMP.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Question] Just use this library as a reference to Amp with Next.js and not adding the SSR methodology that the ampreact shows. #70

[Question] Just use this library as a reference to Amp with Next.js and not adding the SSR methodology that the ampreact shows. #70

MontoyaAndres commented Jan 9, 2020

dfrankland commented Jan 10, 2020

[Question] Just use this library as a reference to Amp with Next.js and not adding the SSR methodology that the ampreact shows. #70

[Question] Just use this library as a reference to Amp with Next.js and not adding the SSR methodology that the ampreact shows. #70

Comments

MontoyaAndres commented Jan 9, 2020

dfrankland commented Jan 10, 2020