React Templates & Themes Logo React Templates & Themes
Example Frontend Next Js screenshot

Example Frontend Next Js

Author Avatar Theme by Sanity io
Updated: 6 Aug 2022
224 Stars

An example of a Sanity powered frontend using Next.js

Github Live Preview

Categories

Nextjs Sanity

Overview:

This is an example frontend for the movie dataset using Sanity and Next.js. It is powered by Sanity and built with Next.js. It requires Node.js version 8.0 or greater to be installed on the system.

Features:

  • Sanity powered: The frontend is powered by Sanity, enabling easy management of the movie dataset.
  • Next.js integration: The frontend is built using Next.js, providing server-side rendering and other powerful features.
  • Easy setup: The code can be cloned or downloaded, and the dependencies can be installed with a single command.

Installation:

To install the theme, follow these steps:

  1. Clone the repository using git or download the source code as a zip archive.
  2. Open the terminal in the project directory.
  3. Run the following command to install the dependencies:
    npm install
  4. If you’re running your own Sanity project with the example movie dataset, go to lib/sanity.js and change the following lines:
    dataset: 'your-dataset-name',
projectId: 'your-project-id'
    Replace 'your-dataset-name' with the name of your dataset and 'your-project-id' with the ID of your project, which can be found in the header of the management page for your project.
  5. Enable localhost:3000 in your CORS Origins settings. This can be done through the management page under settings or by running the following command in the project folder you set up with sanity init:
    sanity cors add http://localhost:3000
  6. Start the example app with the following command:
    npm run dev
  7. The app should now be up and running at http://localhost:3000.

Summary:

This example Sanity + Next.js frontend provides a powerful and easy-to-use solution for managing and displaying a movie dataset. With features like Sanity integration, Next.js support, and easy installation, it is a great choice for building movie-related websites or applications.