Revamping college's website. This is a Next.js project bootstrapped with create-next-app
.
- Framework: Next.js
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Animations: Framer
- Table package: TanStack/react-table
- Database: Prisma
- Validation: Zod
- Markdown: Contentlayer
- Caching: Redis
- Server-side pagination
- Reusable data-table component
- Authorization implementation via next-auth
- Editor component for easy news editing
- Usage of markdown(mdx)
- Image storage in uploadthing
- News caching by redis
-
Clone the repository
git clone https://github.com/NaotoAzazel/odpk
-
Install dependencies using npm
npm install
-
Configure environment file
-
Usage locally
npm run dev # run the application in development mode npm run build # compile current version of the website npm run start # start the website in production mode
Important: if you add a variable in
.env
, you should also add the same variable insrc/env.js
. All client-side variables should be prefixed with:NEXT_PUBLIC_
.
First, copy .env.example
to .env
.
cp .env.example .env
We will start by setting up our database. You can use any Postgres. Get the variables from your database environment and paste them into .env
. When you've inserted all the variables associated with the database use the following command.
npm i -g prisma
prisma db push
Note: If you are using an environment file called like this:
.env.development
or.env.production
, then use the following command.
npm install -g dotenv-cli
dotenv -e .env.[development/production] -- prisma db push
Now we should get the api keys for uploadthing. Go to website and sign in. Create new application, or use an existing one. Navigate to API Keys
in the left sidebar menu, copy UPLOADTHING_SECRET
and UPLOADTHING_APP_ID
and paste them into .env
.
For Redis we need to get two api keys. Go to Upstash, create Redis database, go to details tab, scroll down to REST API
, copy UPSTASH_REDIS_REST_URL
, UPSTASH_REDIS_REST_TOKEN
and paste them into .env
.
The auth variables: NEXTAUTH_SECRET
can take any value.
It is desirable to make this field long and completely random, you can use this randomkeyget.
NEXT_PUBLIC_APP_URL
in development mode paste your localhost
, and in production paste the url to your site.
Important: each markdown must be starts with:
---
title: Your title here
---
All markdowns are stored in the src/content/pages
. The path for each page generated in this way: to add a page about the director, for example, the following steps should be followed:
-
Create a folder in the
src/content/pages
and name itdirector
. -
Create the file
index.mdx
and fill it with the code.
The file name affects on url to the page. File with name index.mdx
mean, that its root page in current path.
Let explain an example of nesting a file inside a folder. If we want to visit */director/merits
after */director
, we need to create another file in the director
folder and name it merits.mdx
.
So now explain a longer path nesting: folder -> folder -> ... -> file. Now we want to visit */director/merits/some-another-path
, for this we change merits.mdx
to folder merits
, in merits
folder create index.mdx
, in which trasfer code from the recently deleted merits.mdx
, and another file called some-another-path.mdx
.
You can use components that have already been written, such as:
import { Button } from "@/components/ui/button";
import { ResponsiveImage } from "@/components/responsive-image";
import Image from "@/assets/images/landing.jpg";
<Button>Some text here</Button>
<Button variant="outline" size="sm">Button with props</Button>
<ResponsiveImage
src={Image}
width={1000}
height={1000}
alt="Example-image-component"
/>
The @tailwindcss/typography
plugin gives us the opportunity to write styles for any HTML tag using Tailwindcss. Here is how it do:
import { NewsCardSkeleton } from "@/components/skeletons/news-card-skeleton";
<div className="grid grid-cols-2 gap-2">
<NewsCardSkeleton />
<NewsCardSkeleton />
</div>
You can read about basic markdown syntax here.
Recommend to use the Prettier
extension, .prettierrc
file already configured.
- node: v20.16.0
- npm: v10.8.1