Building a Full-stack Multilingual Blog with Next.js 13.4

Create a Next.js 13 project from the terminal on Mac, decide between TypeScript or JavaScript, enable ESLint and Tailwind CSS, then open the project in VS Code.

Open two terminals, run yarn dev to start Next.js 13.4 server, then clean the starter by deleting default code, tailoring config, and unused global css to leave a blank project.

Master file-based routing in Next.js 13 by building an app directory with dashboard and settings folders, mapping segments to url paths, and creating page.tsx files to render the ui.

Learn to create nested routes in Next.js, organize pages under about/company, and implement navigation with the Link component to move between home, about, and company pages.

Explore the key concept of layouts in Next.js 13.4, learning how a route layout provides a shared navigation and wraps the entire app for reusable components like header and footer.

Create a reusable navigation component in a components folder, implement a padding container for consistent spacing, and build a sticky top navigation with a blurred background and home links.

Create a site config file in a config folder to hold social links, description, current location such as Budapest, and logo tags, then export a default TypeScript site config.

Create a reusable footer component in a Next.js blog project, styling padding and a top border, with logo, description, social links, and current year, then integrate it into the layout.

Create a social links component using the Lucid React icon library, wiring a social link TSX with a get icon switch for Facebook, Twitter, Instagram, YouTube, LinkedIn, and GitHub.

Create and use dummy posts and categories to scaffold the UI before the content management system. Define TypeScript interfaces for post, category, and author to guide the data structure.

Create a consistent homepage layout by wrapping content in a layout component with padding and navigation, then apply spacing between components and prepare for a post card component.

Build a post card component with horizontal, vertical, and reverse horizontal layouts, wiring it to dummy post data via props, and using next/link and next/image, including image configuration in next.config.js.

Create a post content component in a multilingual blog built with Next.js 13.4, rendering post data, tags, category with dynamic color, reading time, relative date, and a read more action.

Add a layout prop to the post card to switch between vertical and horizontal arrangements, defaulting to horizontal, and apply conditional grid styling to render posts in the chosen layout.

Build a post list component in Next.js 13.4, define post list props as posts, map to post cards with keys, and compute reading time and relative date in vertical layout.

Learn to compute reading time from post body and relative dates from post date created using the reading time and luxon libraries in a Next.js 13.4 blog.

Learn to implement a reverse post card layout by adding a reverse prop and swapping content order when true, updating the page with post lists and a CTA card.

Create a CTA card component with a content container, heading, and description, then layer a background image with an overlay and add a responsive newsletter form for sign-ups.

Explore responsive design with tailwind css by using breakpoints to target window sizes and container queries to style elements by container size, then apply these concepts to the home page.

Install and configure the tailwind container queries plugin, then implement a mobile-first, single-column layout with vertical post lists and container-based text sizing, using Next.js for dynamic routes.

Learn how to build dynamic category pages in Next.js 13.4 using dynamic routes driven by CMS slugs, creating category folders and page.tsx, and fetching data from route parameters.

Map category slugs and generate static params for dynamic routes in Next.js 13.4, building pages at build time with server-side generation using dummy posts and category data.

Build a category page by integrating the post list component, add a responsive grid that adapts to screen size, and implement container query-based text sizing to enhance readability.

Fix the z-index of the navigation to keep it on top while scrolling the post page, ensuring the navigation stays above all content.

Create a dynamic post page with a slug-based route in Next.js 13.4, reading params.slug to fetch the matching post data from dummy data.

Implement a 404 not found page for missing post data using Next.js 13's not-found function. Ensure the post page shows a proper error when the post is missing.

Explore building a post hero component for a next.js 13.4 blog, featuring the hero section, post page title sizing, a conditional read more button, and hero image integration.

Build a post page layout for a multilingual blog with a social share component and post body, using a flex layout and sticky share buttons on scroll.

Create a social share component for a Next.js blog, wiring Facebook, Twitter, LinkedIn, and WhatsApp links with a reusable link and isShareURL prop for styling, using environment variables for domains.

Create and secure environment variables for a Next.js app by using dot env.local, gitignore, and next public for client access; deploy them via vercel and differentiate server and client components.

Create a post body component that renders a string now and will parse markdown or HTML into JSX later, wiring post body data, importing the CTA cart, and checking responsiveness.

Apply finishing touches to the multilingual blog user interface with responsive layout tweaks, post and category pages, social sharing, and prepare a content management system using directors for Next.js 13.4.

Explore Directus as an open source data platform that creates databases, stores assets, and generates REST/GraphQL APIs, with built-in authorization, access control, asset transformation, and workflows.

Compare three options to create your director's project—director's club cloud, railway with $5 credits, and local setup—and learn why railway offers an easy, free start.

Deploy a Directus project on Railway, sign in with GitHub, configure admin email and keys, deploy to production with a Postgres database, and connect S3 storage.

Create an AWS account using the free tier and sign in. Open S3, create a bucket named directors maker dev in your region, and note its details for your project.

Connect AWS S3 storage to your Directus project by configuring storage driver, locations, bucket, region, endpoint, and access keys, then verify uploads in the Directus file library.

Learn to use Directus CMS to manage content with collections, users, and files, and create your first post collection with no-code webhooks and flows for a Next.js app.

Create your first collection named post with a generated uuid, enable system fields, and define title, description, slug unique url safe, image, and buddy rich text.

Create a categories collection, clone title, slug, and description fields from posts, adjust id and status, and establish relations between category and post tables.

Explore relational data concepts and four relation types—one-to-one, one-to-many, many-to-one, and many-to-many—using posts and categories as the starting one-to-many example for a blog.

Create relational fields between posts, categories, and authors in a relational data model. Learn many-to-one and one-to-many relations, default values, display templates, and delete behavior like cascade or prevent deletion.

Create and publish categories in Directus by using the content section to delete existing categories, add new items with titles and descriptions, and save as published before moving to posts.

Create your first blog post by entering the title, description, and category, importing an image from a url, and generating the body with ChatGPT.

Explore key concepts of APIs and CRUD operations, including authorization layers, and how a Next.js app securely uses a directors API to create, read, update, and delete data.

Learn how to secure your Directus data by configuring roles and permissions for the post table, using server-side tokens, and fetching data in Next.js to keep secrets private.

Install the Directus JS SDK, configure a directors instance in a Next.js project with the API URL and a server-side admin token, and use it to interact with the CMS.

Learn to fetch homepage data in a Next.js 13.4 full-stack blog using server components to securely load CMS posts, while avoiding secrets in client components and wiring fields.

Learn to fix image src errors by configuring a next public assets url, building a full image URL, and enabling public CMS access for remotely hosted images.

Optimize heavy images on the fly using transformation presets in project settings, lowering quality to 60 and converting to WebP, improving SEO and page speed.

Fetch category data on the categories page by querying the CMS with the slug. Fix image and CSS issues and enhance data fetching with async/try-catch and TypeScript typing for params.

Replace the generate static params function with a try-catch to fetch categories, filter by status published, and return categories and params for static category pages.

Generate static params for blog post pages in Next.js 13.4 by filtering posts with publish status and mapping slugs. Return params for slug and handle errors in a try-catch block.

Fetch post data in a server component by slug, handle errors, select fields such as category and author, and parse post HTML into JSX.

Install the html-react-parser library and import parse to convert the post body HTML. Create a function to parse the body string and render it in the post page.

Define a rich text utility layer in globals CSS to target post h2 and p elements, apply typography styles, and enhance with images using the Next.js image component.

Replace image elements with a Next.js image component using a TypeScript DOM parser, preserving src and alt and adding object-cover styling. Push form data to the subscriber table.

Set up a subscribers table with a required, unique email field and implement a server action in Next.js 13.4 to handle the subscribers form submission.

Learn to reset a form in a server component by using Next.js revalidate tag to revalidate data and refresh the form without client-side state.

Fix a TypeScript error from an async server component in Next.js, apply the documented async/await workaround, and prepare the post page, then explore internationalization with Next.js.

Explore internationalization for a multilingual blog by setting English and German locales, implementing localized routing on the client, and fetching localized posts via a locale-aware API.

Create and export an i18n configuration. Set English as the default and main locale, list English and German as locales, define a TypeScript interface for config, and plan localized routes.

Create localized routes using sub folders in a Next.js 13.4 app, with a Lang folder and a lang param to localize texts.

Middleware runs before fulfilling a request in a next.js app, enabling checks on IP, headers, and authentication, and redirects or rate limiting. Use it to detect locales and redirect users.

Implement language-based redirects in a Next.js 13.4 full-stack multilingual blog by leveraging middleware, negotiator, and locale matching to serve users in their preferred language.

Create dictionaries to manage locale-specific content for a multilingual blog, defining keys for navigation, links, cities, experiences, buttons, and footer text.

Create a get dictionary function to fetch locale-specific dictionaries (English or German) from JSON, using async logic and a locale fallback, then apply it in the app.

Extract the route locale, pass it through components, and load a dictionary to render navigation, CTAs, and posts in multiple languages, enabling a fully localized Next.js UI.

Create localized data in Trek to CMS by adding a translations field, duplicating title and description into category translations, and translating them into German.

Learn to create localized data for posts in directus by adding a translations field, duplicating post fields for translations, and translating the body and description to German.

Fetch localized homepage posts by detecting the locale and selecting translated fields for title, description, and body, including category translations, to render a multilingual blog home.

Learn to fetch and render localized category data and posts by locale, generate German and English static params, and translate categories and posts titles.

Create localized post page data by enriching the get post data function with translations for title, description, and category, generate static params for locales, and add a language switcher.

Build a language switcher in a Next.js 13.4 multilingual blog, using localized routes, client-side logic, and locale-aware redirects, then optimize seo with the metadata api.

Explore the metadata API in Next.js 13 to manage file based and static metadata, including titles, descriptions, schema markup, opengraph, Twitter card, canonical and alternate URLs, and dynamic metadata.

Add file-based metadata in Next.js by placing a favicon and an Open Graph image in the app folder, and configure a matcher to exclude static assets from middleware.

Export a metadata object to set the home page title and description in Next.js, pulling the description from config and adjusting language-specific pages like German.

Learn to implement dynamic metadata that changes by locale using a generate metadata function and a locale dictionary to return locale-specific descriptions.

Learn to build dynamic metadata for category pages by implementing a generate metadata function that fetches category data, sets titles and descriptions, and caches requests with React.

Learn to implement title templates in Next.js 13.4 route layouts by returning a title object with a template and a default from site config, and override with absolute for pages.

Learn to implement dynamic metadata for a post page by extracting slug and locale, fetching post data, and generating title and description, plus open graph and twitter card metadata.

Create open graph metadata in the layout, defining og title, description, url, site name, and image for the homepage, category page, and post page. Verify deployment with environment variables.

Create canonical and alternate urls in metadata for multilingual optimization, using English and German versions, use the same slug across locales, apply schema markup for blog articles to inform Google.

Construct a JSON-LD article schema for Google's search platform, mapping headline, image, author, publisher, and dates from post data, then validate with Google's schema markup checker.

learn to generate dynamic open graph images for blog posts in next.js 13.4 by building an open graph image tsx that uses post data via slug and lang.

Implement dynamic open graph images for category pages by exporting the getCategoryData function in tsx and applying metadata to category and post pages in a next.js 13.4 blog.

Learn to create a robots.txt file in Next.js 13.4 to block private routes like account settings, while serving others, and to set up static and dynamic sitemaps.

Generate localised sitemaps in a Next.js blog, choosing static or dynamic approaches, pulling posts and categories from a CMS, and producing English and German sitemap entries.

Integrate Google Analytics into a Next.js app by creating an account, data stream, and measurement ID, and loading the script via Next Script after interactive.

fix the server actions error by commenting out code in the cta card and next.config.js, then refresh to restore page titles, and plan to make the component a client component.

Transform the CTA card into a client component by removing async code and passing a dictionary prop. Implement form logic with input state and a submit handler using server actions.

Fix CORS by configuring environment variables for course enablement and origins, deploy on railway, test in incognito, and prepare API security and Google search console integration.

Learn to verify a multilingual blog with Google Search Console using a meta tag or DNS, create a domain property, and apply the Google ID in route metadata.

Build and test the multilingual blog locally with yarn build to catch errors, verify all routes are static, then push to GitHub and deploy to Vercel.

Create a GitHub repository for your Next.js blog project, push changes with git commands, and set up a remote origin to connect with Vercel for automatic deployments.

Deploy a multilingual Next.js blog on Vercel, sign up and log in, connect GitHub repositories, import projects, configure environment variables and domains, and verify sitemap with Search Console.

Fix Google site verification errors and deploy updates via git push. Verify and configure Search Console properties, submit the sitemap.xml, and confirm 27 pages are discovered for pagespeed optimization.

Assess the post page's page speed score on desktop and mobile, identify largest contentful paint issues and image sizing improvements for high performance.

Improve lcp by lowering image quality to 45 and marking the first-screen image as priority in a Next.js 13.4 blog project, then redeploy for near-perfect seo and mobile performance.

Learn how to implement on-demand revalidation in Next.js 13.4 with a token-secured app directory API route to refresh cached content, including posts, categories, and language.

Create and run on-demand revalidation flows to revalidate all pages from your CMS, using a manual trigger and a get request to the Next.js api/revalidate endpoint.