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.
Contributions
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
License
Licensed under the GNU GENERAL PUBLIC LICENSE, Copyright ยฉ 2021
See LICENSE for more information.