Tailwind Logo

Building a Site with Sitecore Headless and Next.js - Creating an Empty Project

Next.js

Published: 2021-10-27

Last time, we set up the Sitecore instance and got it running on Vercel. This time, we'll clean up the sample site's existing content and remove the defined elements used for display, creating an empty project.

Delete sample data

Instructions for deleting the sample data can be found on the page displaying the site after running jss start.

nextjs201.png

The file for this page is /data/routes/en.yml and the corresponding code is as follows

HTML 
<div class="alert alert-dark">
<h4>How to start with an empty app</h4>
<p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>
<ol>
    <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>
    <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
    <li>Delete <code>/data/component-content/Styleguide</code></li>
    <li>Delete <code>/data/content/Styleguide</code></li>
    <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
    <li>Delete <code>/data/dictionary/*.yml</code></li>
</ol>
</div>

Follow this procedure to delete files, but as the above will result in an error, we will describe a procedure that does not result in an error.

  1. /src/components/ Delete the Styleguide and fields contained in the folder
  2. /src/components/ folder, except for the GraphQL-ConnectedDemo.graphql file.
  3. /sitecore/definitions/components Delete Styleguide, GraphQL and fields folders in the folder
  4. /sitecore/definitions/templates/ Delete the entire folder
  5. /data/component-content Delete folders
  6. /data/content Delete folders
  7. /data/routes/ Delete styleguide and graphql folders in the folder

In this case, we will leave it as it is with regard to dictionaries.

Then adjust the contents of the top page. /data/routes/en.yml file because there are many links to sample data,

HTML 
<h3><a href="/styleguide">Styleguide</a></h3>

Delete the code below the This will remove the link to the deleted data. At this stage, running jss start will result in a site with the data gone, as shown below. There is still no link to the global navigation in the upper right corner, but we will leave it there for now.

nextjs202.png

Change the name to match the project

In the sample source code, it is working by inheriting from StyleguideComponentProps regarding the component name. The "Styleguide" is changed to "Nextjsdemo" to match the project.

  • /src/components/ContentBlock.tsx
    • StyleguideComponentProps to NextjsdemoComponentProps ( 2 point )
  • /src/Layout.tsx
    • StyleguideSitecoreContextValue to NextjsdemoSitecoreContextValue ( 2 point )
  • /src/lib/component-props.ts
    • StyleguideComponentProps to NextjsdemoComponentProps ( 2 point )
    • StyleguideSitecoreContextValue to NextjsdemoSitecoreContextValue ( 2 point )
    • StyleguideSpecimenFields to NextjsdemoSpecimenFields ( 1 point ) 
    • StyleguideComponentWithContextProps to NextjsdemoComponentWithContextProps ( 1 point )
  • /scripts/templates/component-src.ts 
    • StyleguideComponentProps to NextjsdemoComponentProps ( 2 point )
  • /src/pages/[[...path]].tsx 
    • StyleguideSitecoreContextValue to NextjsdemoSitecoreContextValue ( 3 point )

There are multiple files, but it is quick and easy to make batch changes in Visual Studio Code.

  • StyleguideComponentProps to NextjsdemoComponentProps ( 6 point )
  • StyleguideSitecoreContextValue to　NextjsdemoSitecoreContextValue ( 7 point )
  • StyleguideSpecimenFields to NextjsdemoSpecimenFields ( 1 point )
  • StyleguideComponentWithContextProps to NextjsdemoComponentWithContextProps ( 1 point )

If you have already deployed to Sitecore once, you can delete the entire site and run jss deploy items -c -d again to deploy this empty template.

Summary

The source code can be viewed anytime by accessing Sitecore's JSS repository, so we will clean up the environment at hand and work on it.

Related article

Tags