Skip to content

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

Notifications You must be signed in to change notification settings

dfrankland/ampreact

Repository files navigation

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.

Deploy to now

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published