Marcel Prezly Theme is based on Next.js 10+ framework. Made with Next.js, PrezlySDK, TypeScript, ESLint and Slate Renderer.

• 🎈 Homepage with list of articles
• 🤖 Sitemap.xml, SEO metadata and Open Graph Tags
• 📖 Article detail including images, galleries, cards and video
• 💯 Maximize lighthouse score

• 🔥 Next.js with SSR, SSI or SSG option
• 🧪 Test/Seed data in 3 categories
• 🎉 Type checking TypeScript
• 🎨 Strongly typed content/entities

• ☕ Minify HTML & CSS
• 💨 Live reload/Fast refresh
• ✅ Code splitting and bundling
• ☯ Hybrid: SSG, SSI or SSR
• 🌄 Image optimization

• Node.js and npm

Run the following command on your local environment

git clone https://github.com/prezly/theme-nextjs-marcel
cd theme-nextjs-marcel
npm i

Set up your .env.local file by copying .env.example and filling in Prezly API key and newsroom UUID.

cp .env.example .env.local

After that you can run locally in development mode with live reload:

npm run dev

Open http://localhost:3000 with your favorite browser to see your project.

Deploy the example using Vercel or Netlify:

Vercel	Netlify

List of routes we automatically generate:

• / : Index page listing stories
• /[article_slug] : Article pages with slug provided by PrezlySDK
• /category/[category:slug] : Category page listing articles in respective category
• /sitemap.xml: Sitemap

To ease with development we have created a few sample newsrooms in different categories:

• The Good Newsroom (preview on vercel): A newsroom filled with good news
• Cookbook (preview on vercel): Recipes shared by the Prezly team
• Anonymous Photographer (preview on vercel): Pictures from a photographer. Combination of albums and imagery

A list of tokens/newsroom uuids that can be used to kickstart the theme.

Each route (index, category, and story) is wrapped on a React.Context to make it easier to get values from the newsroom with a simple hook.

Under hooks/:

• useNewsroom(): Get Newsroom object.
• useCategories(): Get all categories from newsroom.
• useSelectedCategory(): On a category page, gets the current category.
• useCompanyInformation(): Used to get information about the company, like the about text, social links, etc.

@/modules/Stories module exports two variants of stories list pagination:

• PaginatedStories: Classic query-parameter-based pagination, used in the starter by default
• InfiniteStories: Infinite loading of stories with Load More button

You can find the examples of the implementation in the Index page and Category page.

Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.

Licensed under the GNU GENERAL PUBLIC LICENSE, Copyright © 2021

See LICENSE for more information.

Made with ♥ by Prezly.com