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

Folders and files

NameName
Last commit message
Last commit date
Jun 30, 2019
Jun 30, 2019
Sep 30, 2017
Jun 30, 2019
Jun 30, 2019
Jun 30, 2019
Sep 30, 2017
Jun 30, 2019
Jun 30, 2019
Jun 30, 2019
Jun 30, 2019
Jun 30, 2019
Jun 30, 2019
Aug 10, 2019
Aug 10, 2019
Jun 30, 2019

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