Next.js Dev to Deployment

Discover how to set up a Next.js project with Create Next App, structure a front end and back end, run the dev server, and use pages and CSS modules.

Explore how Next.js automates pages and routing with a pages folder, including nested and dynamic routes, and delivers server side generated content for better SEO.

Learn to link pages in next.js with next/link for client-side navigation, use the useRouter hook to read path name and slug, push programmatic redirects, and plan seo-friendly titles.

Build a reusable Next.js layout that uses the head component to set page titles and meta descriptions, with a shared container and default props for title, description, and keywords.

Build a responsive header and footer in a Next.js layout, using a header component with a logo and links to home and events, styled with flexbox and CSS modules.

Shorten import paths in Next.js by configuring module aliases in jsconfig.json, setting baseUrl to the project root, and defining paths for components and styles, then restart the dev server.

Build a Next.js showcase component as a hero banner with a background image and overlay, styled via a CSS module, displayed only on the home page.

Explore Next.js data fetching with get server side props, get static props, and get static paths to fetch on each request, at build time, and for dynamic routes with revalidate.

Learn to display a list of events in a Next.js app by fetching data with getStaticProps, rendering event items with images, and linking to dynamic event pages.

Explore dynamic routing in Next.js by fetching single events with get static paths and get static props, using slug-based paths and revalidate with fallback controls for static generation.

Build a single event page in Next.js by displaying event details, the image, and controls such as edit, delete, and go back, while planning Strapi-backed CRUD and Cloudinary image uploads.

Learn to set up a back end with a headless Strapi CMS, including a secure API and JWT authentication, hosting on Heroku, and integrating Cloudinary for image storage.

Integrate cloudinary with Strapi to manage images: sign up, obtain keys, install cloudinary provider, configure env vars, restart server, upload assets, and use thumbnails for small images.

Build an event content type in Strapi with slug generation, fields for name, venue, date, time, performers, description, image, and a user relation, then publish a public API for Next.js.

Connect a Next.js app to a Strapi backend by updating API calls, handling image formats, and enabling Cloudinary domains, then implement sorted, limited event queries and slug-based details.

Learn to build a Next.js search page that uses Strapi filters with contains to match across name, performers, description, and venue via a query string and results page.

Create a Next.js search component with a css module, manage input with useState, navigate to events/search/{term}, and integrate the search box into the header.

Create an add event page with a public form in Next.js, wiring state for fields (name, performers, venue, address, date, time, description), and submit to the backend via API URL.

Build a functional add event form in a Next.js app, implement basic validation, integrate react-toastify for feedback, post to /events, and redirect to the new event slug.

Configure Strapi lifecycle hooks to auto generate slugs from event name, update on changes, and use a slug field with slugify and lower: true to redirect to event page.

Implement delete event functionality with a confirmation prompt, toast notifications for errors, and a redirect to the events page after a successful deletion.

Create an edit event page at pages/events/edit/[id], fetch the initial event with getServerSideProps, format the date with moment, update via PUT, and include image preview.

Build a reusable modal component in next.js using createPortal, guarded by a browser check and a custom _document root, with styling, header, body, and an overlay.

Build an image upload component in a modal, wire file changes to form data, post to Strapi, and update the event preview image on success.

Implement server-side pagination for the events page using Strapi, with limit and start, compute start from page, fetch total count, and render previous and next links via a pagination component.

Build login and registration pages in Next.js, wire header links, and plan an auth context with api routes to securely store the Strapi json web token and validate credentials.

Create an auth context using the React context API to manage the user, errors, and auth actions (register, login, logout, check login) and prepare for Strapi JWT and http-only cookies.

Learn how to authenticate with Strapi using json web tokens, store the token via http only cookies on the server, and access protected routes through api routes in Next.js.

Create a Next.js login api route that authenticates with Strapi to obtain a json web token, wired to the auth context and testable at /api/login.

Store the Strapi JWT in a server-side http-only cookie named token with the cookie package, setting secure, max-age, same-site, and path / for server-wide access.

Persist the logged-in user by checking the cookie in a useEffect, fetching the Strapi user via /api/user and /users/me, and redirecting to /account/dashboard after login.

Implement a logout flow by creating a server api route that destroys the cookie via a post request, sets it to empty and expired, and redirects the user home.

Create a register API route by duplicating the login flow, posting username, email, and password to Strapi auth local / register, and handle the token via http only cookies.

Create a new Strapi endpoint to fetch the currently logged-in user's events at /events/me, using a me controller method, token authentication, and sanitize entity to return the user's events.

Fetch the logged-in user's events in a Next.js dashboard by parsing cookies to obtain a token, calling /events/me with a bearer authorization in getServerSideProps, and passing events to the page.

Implement an is owner policy in the Strapi backend to ensure users can only edit or delete their own events, linking events to users via JSON web tokens.

Enable token-based authentication on event page. Pass the token via server-side props and use a bearer token so events belong to logged-in user and can be edited or deleted.

Learn how to implement authenticated CRUD for events in Next.js, including edit, delete, and image upload with token-based authorization. Leverage server-side props and a user dashboard.

Deploy a Strapi backend to Heroku using Postgres on the free hobby dev tier, configure production env vars and Cloudinary keys, push via git, and manage production data.

Deploy a Next.js site to Vercel, switch from static paths to server-side props for slug pages, and configure production API and environment variables before pushing to GitHub.

Create a completely static blog called dev space using markdown posts with front matter parsed by gray matter, styled with Tailwind CSS, and featuring pagination, category filtering, and search.

Explore what markdown is, why it suits personal blogs, and how to render it with marked and front matter parsed by Gray Matter for portable blog posts.

Master markdown basics, from headings and emphasis to links, images, block quotes, lists, code blocks with language highlighting, and tables. Use a cheat sheet to help clients create posts.

Set up a Next.js blog with tailwindcss by creating a Next app with npx, installing tailwind, postcss, and autoprefixer, and configuring purge and global styles to verify tailwind utility classes.

Create a reusable layout component in Next.js that wraps pages, integrates next/head for dynamic title and meta tags, and accepts children, title, keywords, and description with default props.

Build a responsive next.js header with Tailwind styling, using flexbox to align a logo and dev space branding with blog and about navigation, plus next/link and next/image.