Git<\/li>\n<\/ul>\nSetting up the Backend with Strapi<\/h2>\n
First, let’s set up the backend using Strapi. Strapi provides a simple and user-friendly way to create APIs for your projects.<\/p>\n
Step 1: Create a new Strapi project<\/h3>\n
To create a new Strapi project, open a terminal and run the following command:<\/p>\n
npx create-strapi-app my-blog --quickstart\n<\/code><\/pre>\nThis will create a new Strapi project in a directory called my-blog<\/code> using the quickstart template.<\/p>\nStep 2: Configure the database<\/h3>\n
By default, Strapi uses SQLite as the database for development. If you want to use a different database, you can configure it in the .env<\/code> file located in the root directory of your project.<\/p>\nFor example, if you want to use MongoDB, open the .env<\/code> file and update the DATABASE_URL<\/code> variable:<\/p>\nDATABASE_URL=mongodb:\/\/localhost:27017\/my-blog\n<\/code><\/pre>\nStep 3: Start the Strapi server<\/h3>\n
To start the Strapi server, navigate to the project directory and run the following command:<\/p>\n
cd my-blog\nnpm run develop\n<\/code><\/pre>\nThis will start the Strapi server on http:\/\/localhost:1337`. You can access the Strapi admin panel by visiting<\/code>http:\/\/localhost:1337\/admin`.<\/p>\nStep 4: Create the content types<\/h3>\n
In the Strapi admin panel, go to the Content-Types Builder<\/strong> section and create two new content types: Article<\/code> and Category<\/code>.<\/p>\nFor the Article<\/code> content type, add the following fields:<\/p>\n\n- Title (Text)<\/li>\n
- Content (Rich Text)<\/li>\n
- Category (Relation with the
Category<\/code> content type)<\/li>\n<\/ul>\nFor the Category<\/code> content type, add a single field:<\/p>\n\n- Name (Text)<\/li>\n<\/ul>\n
Save the changes and go back to the Plugins<\/strong> section. Install and enable the GraphQL<\/strong> plugin.<\/p>\nStep 5: Generate the GraphQL schema<\/h3>\n
To generate the GraphQL schema for your Strapi project, run the following command in the project directory:<\/p>\n
npm run build\n<\/code><\/pre>\nThis will generate the schema at .\/.tmp\/graphql\/schema.graphql<\/code>.<\/p>\nWith the Strapi backend set up, we can now move on to building the frontend using Next.js.<\/p>\n
Setting up the Frontend with Next.js<\/h2>\n
Next.js is a powerful React framework that enables server-side rendering and other advanced features to build fast and scalable applications.<\/p>\n
Step 1: Create a new Next.js project<\/h3>\n
To create a new Next.js project, open a terminal and run the following command:<\/p>\n
npx create-next-app my-blog\n<\/code><\/pre>\nThis will create a new Next.js project in a directory called my-blog<\/code>.<\/p>\nStep 2: Install dependencies<\/h3>\n
Navigate to the project directory and install the required dependencies:<\/p>\n
cd my-blog\nnpm install axios graphql-request\n<\/code><\/pre>\nWe will use the axios<\/code> library to make HTTP requests to the Strapi API and the graphql-request<\/code> library to query our GraphQL API.<\/p>\nStep 3: Configure environment variables<\/h3>\n
Create a new .env.local<\/code> file in the root directory of your project and add the following variables:<\/p>\nNEXT_PUBLIC_STRAPI_API_URL=http:\/\/localhost:1337\/graphql\n<\/code><\/pre>\nThis file will contain environment-specific variables, such as the URL to your Strapi API.<\/p>\n
Step 4: Create API functions<\/h3>\n
In the lib<\/code> directory of your project, create a new file called api.js<\/code> and add the following code:<\/p>\nimport { GraphQLClient } from 'graphql-request';\n\nexport async function request(query, variables = {}) {\n const endpoint = process.env.NEXT_PUBLIC_STRAPI_API_URL;\n const client = new GraphQLClient(endpoint);\n\n return client.request(query, variables);\n}\n<\/code><\/pre>\nThis code sets up a GraphQL client using the graphql-request<\/code> library and exports a function to make requests to the Strapi API.<\/p>\nStep 5: Fetch articles from the API<\/h3>\n
In the pages<\/code> directory of your project, create a new file called index.js<\/code> and add the following code:<\/p>\nimport { request } from '..\/lib\/api';\n\nexport default function Home({ articles }) {\n return (\n <div>\n <h1>My Blog<\/h1>\n <ul>\n {articles.map((article) => (\n <li key={article.id}>\n <h2>{article.title}<\/h2>\n {article.content}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n}\n\nexport async function getStaticProps() {\n const query = `\n query Articles {\n articles {\n id\n title\n content\n }\n }\n `;\n\n const { articles } = await request(query);\n\n return {\n props: {\n articles,\n },\n };\n}\n<\/code><\/pre>\nThis code fetches the articles from the Strapi API using the request<\/code> function we defined earlier and displays them on the page.<\/p>\nStep 6: Start the Next.js development server<\/h3>\n
To start the Next.js development server, run the following command in the project directory:<\/p>\n
npm run dev\n<\/code><\/pre>\nThis will start the Next.js server on `http:\/\/localhost:3000`. If you visit this URL in your browser, you should see the list of articles fetched from the Strapi API.<\/p>\n
Adding Dynamic Routes<\/h2>\n
Next.js allows you to create dynamic routes by using square brackets []<\/code> in the filename. Let’s add dynamic routes to display individual articles.<\/p>\nStep 1: Create a new file for the dynamic route<\/h3>\n
In the pages<\/code> directory of your project, create a new directory called articles<\/code>. Inside the articles<\/code> directory, create a file called [slug].js<\/code> and add the following code:<\/p>\nimport { request } from '..\/..\/lib\/api';\n\nexport default function Article({ article }) {\n return (\n <div>\n <h1>{article.title}<\/h1>\n {article.content}\n <\/div>\n );\n}\n\nexport async function getStaticPaths() {\n const query = `\n query Articles {\n articles {\n slug\n }\n }\n `;\n\n const { articles } = await request(query);\n\n const paths = articles.map((article) => ({\n params: { slug: article.slug },\n }));\n\n return {\n paths,\n fallback: false,\n };\n}\n\nexport async function getStaticProps({ params }) {\n const query = `\n query Article($slug: String!) {\n article(where: { slug: $slug }) {\n title\n content\n }\n }\n `;\n\n const { article } = await request(query, { slug: params.slug });\n\n return {\n props: {\n article,\n },\n };\n}\n<\/code><\/pre>\nThis code fetches the individual article based on the slug<\/code> parameter from the Strapi API and displays it on the page.<\/p>\nStep 2: Link to the dynamic route<\/h3>\n
In the index.js<\/code> file, replace the li<\/code> element with the following code:<\/p>\nimport Link from 'next\/link';\n\n\/\/ ...\n\n<ul>\n {articles.map((article) => (\n <li key={article.id}>\n <Link href={`\/articles\/${article.slug}`}>\n <a>\n <h2>{article.title}<\/h2>\n <\/a>\n <\/Link>\n {article.content}\n <\/li>\n ))}\n<\/ul>\n<\/code><\/pre>\nThis code uses Next.js’s Link<\/code> component to create a link to the dynamic route for each article.<\/p>\nRestart the Next.js server and visit `http:\/\/localhost:3000` to see the updated list of articles. Clicking on an article should take you to the individual article page.<\/p>\n
Conclusion<\/h2>\n
Congratulations! You have successfully built a blog with Next.js as the frontend and Strapi as the backend API. You have learned how to set up the backend with Strapi, create content types, and generate a GraphQL schema. You have also learned how to set up the frontend with Next.js, fetch data from the Strapi API, and create dynamic routes.<\/p>\n
This is just the beginning of what you can accomplish with Next.js and Strapi. Feel free to explore the Next.js and Strapi documentation to discover more features and possibilities for your projects. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, we will learn how to build a blog using Next.js, a popular React framework for server-side rendering, and Strapi, an open-source headless CMS. By the end of this tutorial, you will have a fully functional blog with Next.js as the frontend and Strapi as the backend API. Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[1671,1672,444,1668,1669,1670,1667],"yoast_head":"\nHow to Build a Blog with Next.js and Strapi - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Blog with Next.js and Strapi\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will learn how to build a blog using Next.js, a popular React framework for server-side rendering, and Strapi, an open-source headless CMS. By the end of this tutorial, you will have a fully functional blog with Next.js as the frontend and Strapi as the backend API. Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:47:56+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Panther\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t },\n\t \"headline\": \"How to Build a Blog with Next.js and Strapi\",\n\t \"datePublished\": \"2023-11-04T23:14:08+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:56+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/\"\n\t },\n\t \"wordCount\": 852,\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"keywords\": [\n\t \"\\\"blogging with Next.js\\\"\",\n\t \"\\\"blogging with Strapi\\\"]\",\n\t \"\\\"build a blog\\\"\",\n\t \"\\\"how to build a blog\\\"\",\n\t \"\\\"Next.js tutorial\\\"\",\n\t \"\\\"Strapi tutorial\\\"\",\n\t \"[\\\"Next.js and Strapi\\\"\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/\",\n\t \"url\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/\",\n\t \"name\": \"How to Build a Blog with Next.js and Strapi - Pantherax Blogs\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t },\n\t \"datePublished\": \"2023-11-04T23:14:08+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:56+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"http:\/\/localhost:10003\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"How to Build a Blog with Next.js and Strapi\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"description\": \"\",\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t },\n\t \"query-input\": \"required name=search_term_string\"\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"width\": 1024,\n\t \"height\": 1024,\n\t \"caption\": \"Pantherax Blogs\"\n\t },\n\t \"image\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t \"name\": \"Panther\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"caption\": \"Panther\"\n\t },\n\t \"sameAs\": [\n\t \"http:\/\/localhost:10003\"\n\t ],\n\t \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build a Blog with Next.js and Strapi - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Blog with Next.js and Strapi","og_description":"In this tutorial, we will learn how to build a blog using Next.js, a popular React framework for server-side rendering, and Strapi, an open-source headless CMS. By the end of this tutorial, you will have a fully functional blog with Next.js as the frontend and Strapi as the backend API. Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:08+00:00","article_modified_time":"2023-11-05T05:47:56+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Build a Blog with Next.js and Strapi","datePublished":"2023-11-04T23:14:08+00:00","dateModified":"2023-11-05T05:47:56+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/"},"wordCount":852,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"blogging with Next.js\"","\"blogging with Strapi\"]","\"build a blog\"","\"how to build a blog\"","\"Next.js tutorial\"","\"Strapi tutorial\"","[\"Next.js and Strapi\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/","url":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/","name":"How to Build a Blog with Next.js and Strapi - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:08+00:00","dateModified":"2023-11-05T05:47:56+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-build-a-blog-with-next-js-and-strapi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Build a Blog with Next.js and Strapi"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4202"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4202"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4202\/revisions"}],"predecessor-version":[{"id":4338,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4202\/revisions\/4338"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4202"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}