postsin the space provided under Name, select Multiple contents since you will be having many posts, and click Create to create the schema.
Titlefor the title of your posts,
Slugto define the URL of your posts, and
Contentto contain the body of your blog posts.
Titlefield in the modal window as shown below:
Titlefield is required since every post must have a title. Click Save and add field to save your changes and proceed to add the
Slugfield as shown below:
Slugfield and proceed to add the
Contentfield to use a WYSIWYG editor by configuring the Editing tab as shown below:
yand press enter to continue with the installation.
squidex-blogdirectory and start the development server.
yarn devcommand starts a Next.js development server at
htttp://localhost:3000to see your Next.js app. You should see Welcome to Next.js on the page. You have now successfully installed Next.js and are ready to start building your blog.
Layoutcomponent that adds a header and footer to all the pages of your blog. Create a
squidex-blogand create a
layout.jsfile in the
squidex-blog/componentsfolder with the following contents:
childrenprop allows you to embed whatever content is added into the
Layoutcomponent between the header and footer.
Layoutcomponent, replace the contents of the
squidex-blog/styles/globals.cssfile with the following:
Appcomponent of your blog to wrap the application in a header and footer with the
Layoutcomponent you created. In Next.js, a custom app component is used to add a consistent layout to app pages and to add global CSS to your app. You can learn more about it from the Custom App page of the Next.js documentation.
squidex-blog/pagesto have the the following content:
localhost:3000if you haven't already. The development server will rebuild your blog. You will see the newly added header and footer.
squidex-blogor whatever name you chose) from https://cloud.squidex.io. On the left sidebar, click the cog icon at the bottom left corner of the page to open settings. Under the Security section click Clients. At the top of the page, you will see a section where you can create a client. In the text box provided under Add a new client, type
nextjs-blogas the name of the client and click Add Client to create the client. Now when you scroll down the page you will notice a new
nextjs-blogclient has been created. By default, this new client comes with the Editor role. In Squidex, roles define which schemas a client has access to and which operations such as reading and writing a client is authorized to do. Since you wouldn't be making any changes to your content from your blog's frontend, you will change the role of the client to Reader i.e. with only read permissions. In the dropdown for Role, select Reader.
.env.localfile in the
squidex-blogfolder and add the following contents
<YOUR_APP>in the value of SQUIDEX_API_URL with the name of your app on Squidex.
.env.localfile once, when you start the development server. To load the environment variables you just created, you have to restart the development server. Press the combination
Ctrl/CMD + Con your terminal to stop the development server, then restart it by running:
.env.local. You can visit the Environment Variables page of the Next.js documentation to learn more about environment variables in Next.js. Now you will proceed to create a helper function that you will use to make GraphQL queries to Squidex.
squidex-blogand in this
libfolder, create a
squidex.jsfile. Add the following contents to the
fetchAPIfunction that receives a GraphQL query and its variables as parameters, queries the Squidex API, and returns the result.
http://localhost:3000in your browser, if you haven't already, to continue previewing changes.
pages/index.js, import the
index.js, export a
getStaticPropsfunction defined as follows:
getStaticPropsis a function that is run at build time to fetch and store data needed to render a page. To learn more about data fetching with getStaticProps in Next.js, see the getStaticProps page of the Next.js documentation. Save the file and refresh your browser to fetch page data from the CMS.
Homepage component of
index.js, pass posts as a prop to
Homecomponent, they will not be rendered on the homepage. You will now create a
BlogItemcomponent that will be used to display and link to all your posts.
blogItem.jsfile in the
squidex-blog/componentsfolder with the following content:
BlogItemon your homepage, import it in
index.js, after the
Headtag, add the following:
index.jsfile will look like this:
pagesfolder, create a
[slug].jsfile. In Next.js, a page is a React Component file in the pages directory. The component at pages/about.js, for example will be accessible at /about. A page enclosed in square brackets like [slug].js is a fallback and Next.js will show this page for all URLs that are not handled by another page, and will pass a
slugvariable to the page. So when you visit a URL like /my-first-blog-post this page is used and
slugwill have the value my-first-blog-post.
Ctrl/Cmd + Con your terminal and run the following command to install
next-mdx-remoteat the top of
fetchAPIat the top of
[slug].jsas you will use it to fetch the contents your blog posts from Squidex:
getStaticPathswith dynamic paths in Next.js, you are required to also export a
getStaticPathsfunction that tells Next.js what pages to generate at build time.
getStaticPropsto fetch the page data when the page is initally loaded. So, to preview the changes made to
getStaticProps, you will refresh the page. When you do so, the data will be made available but since it has not been rendered, nothing will be visible. You will now proceed to render the blog post on this page.
getStaticProps, you may see an error because the page data has not been loaded. Refresh the page to fetch data from your Squidex application.
[slug].jsfile will look like this: