Get Started with Your AI SEO Vercel Portfolio: Your First Concrete Step Today
Portfolio IA SEO Vercel: The Essentials in One Article — Real Code, Diagrams and Concrete Steps, Extracts from a 46-Lesson Course.
The best way to learn Portfolio IA SEO Vercel is by doing. This article gives you a head start with practical excerpts from a 46-lesson course — enough to get your first result today.
- Introduction and Modern Stack
- shadcn-ui the Design System
- Generate Components with v0 dev
- ChatGPT as Co-Developer
- Advanced Portfolio Sections
Mini-blog in MDX inside Next.js
Learning objectives
- Understand what MDX is and why it suits a portfolio
- Install and configure MDX in Next.js App Router
- Structure an article with frontmatter (title, date, description)
- Statically generate the list and article pages
- Understand the SEO impact of a regular blog
MDX: Markdown that speaks React
MDX is enriched Markdown: you write your articles in classic Markdown syntax (headings, lists, links) but you can also insert React components. In practice, you can drop a shadcn button, an interactive chart, or a live demo right in the middle of an article — something impossible with plain Markdown.
For a portfolio, MDX is ideal: you write quickly, the rendering is clean, and every article becomes a page indexable by Google. Three to five solid technical articles are enough to start capturing search traffic.
| Format | Text | React Components | Typical use |
|---|---|---|---|
| Raw HTML | Verbose | No | Simple static pages |
| Markdown (.md) | Fast | No | Docs, notes |
| MDX (.mdx) | Fast | Yes | Technical blog, portfolio |
Install MDX in Next.js
Next.js provides an official package. We install the dependencies and wire them into the configuration:
Create a Next.js project with Tailwind
Learning objectives
- Create a project with
create-next-app - Identify the key folders of the App Router
- Understand the role of
layout.tsxandpage.tsx - Verify that Tailwind is correctly configured
- Run and view the project locally
Prerequisite: Node.js installed
First, check that Node.js is installed (version 18.17 or higher). Next.js 14 does not work with older versions.
| File / folder | Role |
|---|---|
app/layout.tsx | Root layout shared by all pages (html, body, fonts). |
app/page.tsx | The home page, route /. |
app/globals.css | Global styles, Tailwind directives. |
public/ | Static files (images, favicon) served from the root. |
tailwind.config.ts | Tailwind configuration (theme, colors). |
next.config.js | Next.js configuration. |
layout.tsx
Wraps all pages. This is where we define the shared HTML structure, fonts, and default metadata.
page.tsx
The specific content of a route. Every folder containing a page.tsx becomes an accessible URL.
Verify Tailwind
Open app/globals.css. The three Tailwind directives must be present at the top of the file:
"use client" only when we need interactivity.Installation and configuration with Next.js
components.json file, and add your first component via the CLI.Learning objectives
- Run
npx shadcn@latest initand answer the questions - Understand the role of
components.json - Identify the theme CSS variables that were added
- Add a component with
shadcn add - Use the
cn()utility
Step 1: initialize shadcn
From the root of the Next.js project, run the initialization command. It asks a few configuration questions.
The components.json file
This file tells the CLI where to place components and which conventions to follow. You will rarely edit it, but you need to understand it.
Why it is useful
You can pass a className to a component to override its styles without breaking the original ones.
@/components/... fails, check that the @/* alias is correctly configured in tsconfig.json. This is the most common cause of errors after init.This article covers the most useful excerpts — the full Portfolio IA SEO Vercel course (11 chapters, 46 lessons, corrected exercises and final project) takes you all the way.
./access-the-full-course free course: Vibe CodingFAQ
How long does it take to learn Portfolio IA SEO Vercel?
Are there any prerequisites?
Where should I start concretely?
📬 Want to receive this kind of guide every week? Subscribe for free — real code, zero fluff.