squidex-blog
.posts
in the space provided under Name, select Multiple contents since you will be having many posts, and click Create to create the schema.Title
for the title of your posts, Slug
to define the URL of your posts, and Content
to contain the body of your blog posts.Title
field in the modal window as shown below:Title
field is required since every post must have a title. Click Save and add field to save your changes and proceed to add the Slug
field.Slug
field as shown below:Slug
field and proceed to add the Content
field.Content
field to use a WYSIWYG editor by configuring the Editing tab as shown below:Content
field.y
and press enter to continue with the installation.squidex-blog
directory and start the development server.yarn dev
command starts a Next.js development server at http://localhost:3000
. Visit htttp://localhost:3000
to 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.Layout
component that adds a header and footer to all the pages of your blog. Create a components
folder in squidex-blog
and create a layout.js
file in the squidex-blog/components
folder with the following contents:children
prop allows you to embed whatever content is added into the Layout
component between the header and footer.Layout
component, replace the contents of the squidex-blog/styles/globals.css
file with the following:App
component of your blog to wrap the application in a header and footer with the Layout
component 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._app.js
in squidex-blog/pages
to have the the following content:localhost:3000
if you haven't already. The development server will rebuild your blog. You will see the newly added header and footer.squidex-blog
or 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-blog
as 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-blog
client 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.local
file in the squidex-blog
folder and add the following contents<YOUR_APP>
in the value of SQUIDEX_API_URL with the name of your app on Squidex..env.local
file 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 + C
on 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.lib
folder in squidex-blog
and in this lib
folder, create a squidex.js
file. Add the following contents to the squidex-blog/lib/squidex.js
file:fetchAPI
function that receives a GraphQL query and its variables as parameters, queries the Squidex API, and returns the result.squidex-blog/pages/index.js
with this:http://localhost:3000
in your browser, if you haven't already, to continue previewing changes.pages/index.js
, import the fetchAPI
utility from squidex-app/lib/squidex
:index.js
, export a getStaticProps
function defined as follows:getStaticProps
is 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.Home
page component of index.js
, pass posts as a prop to Home
in index.js:Home
component, they will not be rendered on the homepage. You will now create a BlogItem
component that will be used to display and link to all your posts.blogItem.js
file in the squidex-blog/components
folder with the following content:BlogItem
on your homepage, import it in pages/index.js
Home
function in index.js
, after the Head
tag, add the following:index.js
file will look like this:pages
folder, create a [slug].js
file. 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 slug
variable to the page. So when you visit a URL like /my-first-blog-post this page is used and slug
will have the value my-first-blog-post.Ctrl/Cmd + C
on your terminal and run the following command to install next-mdx-remote
:serialize
and MDXRemote
from next-mdx-remote
at the top of [slug].js
:fetchAPI
at the top of [slug].js
as you will use it to fetch the contents your blog posts from Squidex:getStaticProps
function from [slug].js
:getStaticPaths
with dynamic paths in Next.js, you are required to also export a getStaticPaths
function that tells Next.js what pages to generate at build time.getStaticPaths
function in squidex-blog/pages/index.js
:getStaticProps
to 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.BlogPost
function in [slug].js
: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].js
file will look like this: