resarahman/nextjs-wordpress

NextJS + WordPress Starter

NextJS + WordPress (experimental)

Demo https://nextjs-wordpress-indol.now.sh/

💻 Interact on CodeSandbox

This is a Next.js project bootstrapped with create-next-app and hosted on Now.

Table of Contents

• View Demo
• Features
• Development
  • Getting Started
  • TailwindCSS
  • Image Optimization
  • Linting and Code Formatting

Features

• Automatic linting and code formating via ESLint and Prettier
• Next Optimized Images for pages
• Using data fetching, Next.js will grab, route, and server-side render (SSR) posts from a WordPress blog
• TailwindCSS for styles

Development

Getting Started

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

TailwindCSS

Please see the Tailwind documentation to reference all the CSS classes and postcss-preset-env handles adding stage 2+ support with autoprefixing.

Image Optimization

This website uses Next Optimized Images to automatically scale and smush local static images. The following example would auto-optimize (via Mozjpeg) and resize foo-photo.jpg to 640px.

<img
  alt="foo photo"
  className="photo full-width"
  src={require('../public/images/foo-photo.jpg?resize&size=640')}
/>

Linting and Code Formatting

Make sure you have both the ESLint and Prettier extensions installed in your favorite code editor. That's pretty much it!