LIVE: Build a Content Platform with Next.js App Directory, TypeScript, Tailwind and shadcn/ui
Next.js is a popular JavaScript framework that allows developers to build server-side rendered React applications. It provides an easy-to-use developer experience and various powerful features out of the box.
A crucial element of many content platforms is a well-designed app directory, which allows users to browse and discover new applications. In this live coding session, we will demonstrate how to build a content platform using Next.js, TypeScript, Tailwind CSS, and shadcn/ui.
Getting Started
To follow along, make sure you have Node.js installed on your machine. You can verify this by typing node -v in your terminal. If you don’t have Node.js, install it from the official website.
Create a new Next.js project by running the following command:
npx create-next-app my-content-platform
Change into the project directory:
cd my-content-platform
Next, install TypeScript:
npm install --save-dev typescript @types/react @types/node
After the installation, create a tsconfig.json file in the root directory of the project and add the following content:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Integrating Tailwind CSS
Next, we’ll integrate Tailwind CSS into our project. Install it by running:
npm install tailwindcss
Create a tailwind.config.js file in the root directory of the project and add the following content:
module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Add the following line to the styles/globals.css file to import Tailwind CSS styles:
@import 'tailwindcss/tailwind.css';
Adding the shadcn/ui Library
We will use the shadcn/ui library for UI components. Install it by running:
npm install shadcn/ui
Create a new directory components in the src folder. Inside the components directory, create a new file named AppEntry.tsx with the following content:
import React from 'react';
import { UiAppEntryProps, UiText } from 'shadcn/ui';
const AppEntry: React.FC
return (
{title}
{description}
);
};
export default AppEntry;
We have implemented a simple component to display an app’s title, description, and an “Open App” button.
Creating the App Directory
In the pages folder, create a new file named index.tsx with the following content:
import React from 'react';
import AppEntry from '../src/components/AppEntry';
const apps = [
{
title: 'App 1',
description: 'This is the first app.',
},
{
title: 'App 2',
description: 'This is the second app.',
},
{
title: 'App 3',
description: 'This is the third app.',
},
];
const AppDirectory: React.FC = () => {
return (
))}
);
};
export default AppDirectory;
In this code, we have created a simple app directory page that renders multiple instances of the AppEntry component.
Running the Application
To start the development server, run:
npm run dev
Open your browser and visit http://localhost:3000. You should see the app directory with the app entries.
Congratulations! You have successfully built a content platform with Next.js, TypeScript, Tailwind CSS, and the shadcn/ui library. Feel free to customize and enhance the platform based on your specific requirements.
Happy coding!
How he has white bg of the body?
By me is default dark
shadcn is outdated everyone been using it for months every site looks the same now
If only you knew how much $ Microsoft are spending on making their apps accesible
I guess not a big save on company like Microsoft but still wayyyyy above a million a year
And libraries with Radix inside just come with it no sweat
@Matt Pocock
Do you have a day where you stream regularly? I feel like I never get to see you stream haha
I feel like sticking "use client" misses the point of RSC. I think this client library is good because you only install what you use in a very manageable way.
Hey sir 🙂 Can I get a link for the glasses frames please?
That camera and mic is such a production step up! 🔥
I love this form of content! Please make it more often, the TS God! 😀
Great stuff as always. Any chance to chapters?
Thanks for the great video. I am actually porting a private project to exactly this setup. A question regards to copilot and AI usage in general that I have is: Do you have a feeling you lose skill using AI?
lovely video. Thanks Matt.
Awesome, thank you.
pnpm has concurrently included using run glob
this was so cool because i went from saying he has no idea what he’s doing to wow that’s actually a really cool use case
first time watching the entire vod, I really enjoyed watching it
Is there an advantage to using await readdir instead of readdirSync or the fs Sync methods in general?
Have you tried obsidian to manage your markdown files? It's super nice
have you tried using fig for autocompletes in your terminal? you should try it, its really great
Thanks, I didn't know about the tsx package – very useful!
Love pnpm when it works but have a devil of a time with weird errors for non-trivial packages that have init scripts such as Storybook. Things fall apart a bit due to what I can onlu assume is the manner in which pnpm creates a virtual package location using hard links :/