Skip to content

Example Next.js application as a part of the presentation for Junior Guru community. This app is demonstration of the main Next.js features with real examples

Notifications You must be signed in to change notification settings

SvetlanaM/junior-guru-nextjs

Repository files navigation

Junior Guru

This talk was part of my presentation for Junior Guru organisation. Junior Guru is a platform for junior developers and switchers, who wants to join IT. Creator of this club is Honza Javorek. Everybody, not only juniors are welcome here.

About Next.JS

Next.js is open source web framework based on React.js library. Main features of this framework are:

  1. Different types of rendering - client side, server side, pre-rendering
  2. Image optimalisation
  3. Font optimalisation
  4. Better SEO
  5. Easy routing
  6. Navigating with Link component between pages

About app

In this example of the app, we have created:

  1. Page with Server Side Rendering
  2. Page with Static Generation
  3. Page with Incremental Static Generation
  4. Routing
  5. Dynamic routing
  6. Next Link
  7. Next Router
  8. Next Head
  9. Next Layout
  10. Styling in CSS modules
  11. Styling with Tailwind
  12. Api Routes

This app is about tweeting and about chickens. Backend is supported with Prisma ORM connected to local PostgreSQL database.

Setup Prisma

  1. Create local PostgreSQL database
  2. Setup env variable to connect to the database in secret .env file with name DATABASE_URL
  3. Run
npm install
# or
yarn install
  1. Run
npx prisma db push
  1. Run
npx prisma studio

for data manipulation 6. Run

npx prisma generate

Start this project

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

About

Example Next.js application as a part of the presentation for Junior Guru community. This app is demonstration of the main Next.js features with real examples

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published