Marcel Prezly Theme is based on Next.js 10+ framework

March 10th, 2023

About:

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

Technologies Used:

README.md:

Features

Content/Newsroom features

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

Developer experience:

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

Built-in feature from Next.js:

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

Requirements

Node.js and npm

Quick Start

Getting Started

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 your own

Deploy the example using Vercel or Netlify:

VercelNetlify

Documentation

Routes

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

Testing/Token

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.

NameAPI TokenNewsroom UUIDGood NewsroomHKcab_nEbab_a7b2fe3a3465d3729772fa5381800ab5a0c30d8d578e78e9-9a5b-44ad-bda2-5214895ee036CookbookTKcab_nEbab_28432b75d3a85a826e51cd0b502a3d76acf98d199d90b2c1-aed9-4415-a9fb-82dd3a2a1b52Anonymous PhotographerSKcab_nEbab_0b63a6dd0b09286cc99fab93e6e80bfd9aecfbb5ce8299f6-a293-41df-8ffc-1c064d4401bc

Hooks

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.

Available hooks

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.

Other

@/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.