dfrankland / ampreact

⚡⚛ AMP HTML, Next.js, React, styled-components, GraphQL, and TypeScript — The most trendy website boilerplate possible.

ampreact

⚡⚛ AMP HTML, Next.js, React, styled-components, GraphQL, and TypeScript — The most trendy website boilerplate possible.

About

The core of ampreact is built on Next.js, used for all the routing and serving of pages. For styling, styled-components makes it easy—with just a small modification to the rendering of the <style /> tags generated, it works nicely with AMP HTML. Finally, react-amphtml is used for rendering all of the AMP HTML built-ins, extensions, and the <script /> tags needed to use them.

The pages generated should all by properly validated by AMP HTML 💯

Usage

All the usage and benefits of Next.js are available to ampreact.

• Installation:

  npm install

• Development:

  npm run dev

• Production:

  npm run build
  npm run start

Example & Validation

An example of ampreact can be seen here: https://ampreact.dfrankland.now.sh/

For proof of validation, either:

1. Append #development=1 to the URL and check the console for errors

2. Paste the page HTML into https://validator.ampproject.org/#url=https%3A%2F%2Fampreact.dfrankland.now.sh%2F

Deployment

Because ampreact is built on top of Next.js it is simple to deploy to Now or any other cloud infrastructure providers.