Next.js Playground

1. Packages

• Zod
• Sass
• Sharp
• Sanity
• Nextauth
• Typescript
• Turbopack
• Codemirror
• Nodemailer
• Tailwindcss
• Gray Matter
• React Icons
• Mongodb Altas
• Framer Motion
• Next MDX Remote
• Bcrypt(Replaced by bcryptjs, only used on server side)

2. Components

• Popup
• Error
• Footer
• Loading
• Tooltip
• Youtube
• Codepen
• Markdown
• Cronitor
• ScrollToTop

3. Features

• src folder
• Blog
• Login
• Tools
• Mongodb
• Feedback
• Add Moments
• Live timeago
• Login user group
• Online HTMl playground
• Capture website from url
• Playground(Hidden interactive eggs)

4. Bugs

• Cannot use bcrypt(Replaced by bcryptjs, only used on server side)
• Only root loading.tsx usable(Seems that the bug has been fixed after 13.1.6)
• Cannot generate static pages using force-cache(Solved because of Nextauth unstabl_getServerSession at root navbar)

5. Traps

• Server side cannot access client-side api route
• Client side cannot access server-side environment(env in next config accessible globally)
• dns not found error mostly you put server component in client component. They even cannot be in the same index.ts.

6. TODOs

• Add page loading progress bar(2023.4.1 Tricky way to solve it)
• Better way to update user session whenever a user first opens page
• Gist page add add and delete button(2023.4.12 Solved by using sanity studio)

7. Tailwindcss Rules

Key	Value
Max width	sm
Break point	md
Duration	300
Light	gray-500
Dark	gray-700
Theme	green-600

8. Deploy

Add .env file:

MAILFROM="your_email"
MAILPASS="your_email_pass"
OPENAI_TOKEN="create_a_openai_token"
GITHUB_TOKEN="create_a_github_token"
NEXTAUTH_SECRET="create_a_nextauth_secret"
SANITY_PROJECT_ID="create_a_sanity_project_id"
NEXTAUTH_URL="https://your.website.domain.com/"
MONGODB_URI="mongodb://username:password@mongodb0.example.com:27017/"

Build project:

npm run build

Start project:

npm start