News/Article application using Strapi and Next.js

Discussions
1

Hello everyone,
I am here to find some help. I am a student and have to build a multilingual news application for my final year project.
I am trying hard to create application by myself but it is really frustrating me. After watching so many tutorials and documentation from Strapi and Next.js, i feel that i could never make the application.
I don’t want to get failed in my project. Any kind of help will be appreciated.
Regards.

2

Hello Ahmad :wave:

If you need inspiration, feel free to check the source code of our current demo application: FoodAdvisor. It’s an application listing restaurants, reviews, blog posts, and some landing pages. It has a multilingual system paired with Strapi i18n feature :slight_smile:

You can create something similiar:

  • Strapi
    You just need to create a “new” (news in plural) collection type with i18n activated.
    Don’t forget to open the permission so that Next.js can fetch them.

  • Next.js
    Create a simple page that will list all your news + another that will display a singular new.

news
  [slug].js
  index.js

Very basic code for that without i18n managed (you would need to implement it):

// news/index.js
import { useEffect, useState } from 'react';
import Link from 'next/link';

const NewsIndex = () => {
  const [news, setNews] = useState([]);

  useEffect(() => {
    const fetchNews = async () => {
      const response = await fetch('http://localhost:1337/api/news');
      const data = await response.json();
      setNews(data.data);
    };

    fetchNews();
  }, []);

  return (
    <div>
      <h1>News</h1>
      <ul>
        {news.map((article) => (
          <li key={article.id}>
            <Link href={`/news/${article.attributes.slug}`}>
              <a>{article.attributes.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default NewsIndex;

// news/[slug].js
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

const NewsArticle = () => {
  const router = useRouter();
  const { slug } = router.query;
  const [article, setArticle] = useState(null);

  useEffect(() => {
    if (!slug) return;

    const fetchArticle = async () => {
      const response = await fetch(`http://localhost:1337/api/news?filters[slug][$eq]=${slug}`);
      const data = await response.json();
      setArticle(data.data[0]);
    };

    fetchArticle();
  }, [slug]);

  if (!article) return <div>Loading...</div>;

  return (
    <div>
      <h1>{article.attributes.title}</h1>
      <p>{article.attributes.content}</p>
    </div>
  );
};

export default NewsArticle;

Hope it helps!