Prezly Starter Theme for your newsroom or blog based on Next.js 12+ framework:
- Made with TypeScript, Prezly SDK and Prezly Content React Renderer.
- Data-fetching is handled by Prezly Theme Kit and Prezly SDK.
- Multi-language is powered by React Intl and Prezly Themes Translations.
- Code-style is ensured by ESLint and Prettier.
- Search is powered by Algolia
As we do not want to tell you how to style your project (CSS vs Sass vs CSS-in-JS vs styled components) and sure as hell do not want to force you on our preferred CSS framework this theme does not have any styling loaded. It is intended to be used as a boilerplate to start a new theme from.
The good news is that you don't have to start completely from scratch. Feel free to use the Prezly theme UI Kit Figma file as a design guide.
- Homepage with list of stories
- Story page including images, galleries, cards and video using our Prezly Content React Renderer
- Category page with list of stories based on the selected category
- Galleries page with list of galleries
- Gallery page using our Prezly Content React Renderer
- i18n support for 40+ languages
- sitemap.xml, SEO metadata and Open Graph Tags
- Maximize lighthouse score
- Next.js with SSR, SSG or ISR option
- Test/Seed data in 3 categories
- Type checking with TypeScript
- Strongly typed content/entities
- Minify HTML & CSS
- Live reload/Fast refresh
- Code splitting and bundling
- Hybrid: SSR, SSG or ISR
- Image optimization
- Node.js and npm
Run the following command on your local environment
git clone https://github.com/prezly/theme-nextjs-starter
cd theme-nextjs-starter
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:
- / : Homepage listing stories
- /[slug] : Story page with slug provided by Prezly SDK
- /s/[uuid]: Story preview page used for previewing non-published stories
- /category/[slug] : Category page listing stories in respective category
- /media: Galleries page with infinite loading
- /media/album/[uuid]: Gallery page
- /search: Search page using realtime search with Algolia
- /sitemap.xml: Sitemap
To make development and testing easier we have created a few sample newsrooms:
- 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.
| Name | API Token | Newsroom UUID |
|---|---|---|
| Good Newsroom | HKcab_nEbab_a7b2fe3a3465d3729772fa5381800ab5a0c30d8d |
578e78e9-9a5b-44ad-bda2-5214895ee036 |
| Cookbook | TKcab_nEbab_28432b75d3a85a826e51cd0b502a3d76acf98d19 |
9d90b2c1-aed9-4415-a9fb-82dd3a2a1b52 |
| Anonymous Photographer | SKcab_nEbab_0b63a6dd0b09286cc99fab93e6e80bfd9aecfbb5 |
ce8299f6-a293-41df-8ffc-1c064d4401bc |
The entire application is wrapped with NewsroomContextProvider and IntlProvider from [Next.js Theme Kit]
making it easy to access common objects like newsroom, companyInformation, categories, languages, locale
anywhere in the component tree.
For more information about these hooks please visit our [Next.js Theme Kit].
Generic hook for continuous loading of any dataset keeping track of current page internally. An example implementation
for continuous loading of galleries can be found in the Galleries module.
This module takes care of rendering header and footer components as well as the subscribe form.
It also uses PageSeo component to render all the necessary meta tags with optional props to override
certain meta tag content like title (og:title), description (og:description) and image (og:image, twitter:image).
Classic query-parameter-based pagination, used in the starter theme by default in Stories and Category modules.
Infinite loading of data with Load More button. Not used in the starter theme by default but an example usage can be found
in both Stories and Category modules.
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
Prezly Starter Theme is MIT licensed.
Made with ♥ by Prezly