svetlanam / junior-guru-nextjs Goto Github PK

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.

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

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.

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

4. Run

npx prisma db push

5. Run

npx prisma studio

for data manipulation 6. Run

npx prisma generate

npm run dev
# or
yarn dev

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

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

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

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