🚩 Next.JS app Router and vercel

next.js : kerangka kerja (framework) untuk mengembangkan aplikasi web React.
vercel : platform cloud untuk deployment dan hosting aplikasi web, yang sering digunakan bersama dengan Next.js.

 

Reference:

• jsonplaceholder.typicode
  

  https://jsonplaceholder.typicode.com/posts

 

🔰 Begin [ latihan-1 ]:

Switch node version:

    ❯ nvm use 18.17.0

        Now using node v18.17.0 (npm v9.6.7)

 

   ❯ node --version
      v18.17.0

   ❯ npm --version
      9.6.7

   ❯ npx --version
      9.6.7

   ❯ npx create-next-app@latest
      Need to install the following packages:
      [email protected]
      Ok to proceed? (y) 
      ? What is your project named? › latihan-1
      ? Would you like to use TypeScript? › Yes
      ? Would you like to use ESLint? Yes
      ? Would you like to use Tailwind CSS? › Yes
      ? Would you like to use `src/` directory? › No
      ? Would you like to use App Router? (recommended) › Yes
      ? Would you like to customize the default import alias (@/*)? › No


      Creating a new Next.js app in /Users/.../next-post/latihan-1.

      Using npm.

      Initializing project with template: app-tw 


      Installing dependencies:
      - react
      - react-dom
      - next

      Installing devDependencies:
      - typescript
      - @types/node
      - @types/react
      - @types/react-dom
      - autoprefixer
      - postcss
      - tailwindcss
      - eslint
      - eslint-config-next

      added 369 packages, and audited 370 packages in 10s

      136 packages are looking for funding
      run `npm fund` for details

      found 0 vulnerabilities
      Initialized a git repository.

      Success! Created latihan-1 at /Users/.../next-post/latihan-1      

   ❯ du -sch latihan-1
      317M    latihan-1

Test jalankan pertama kali.

   ❯ cd latihan-1

   ❯ npm run dev

      > [email protected] dev
      > next dev

         ▲ Next.js 14.1.4
         - Local:        http://localhost:3000

      ✓ Ready in 1495ms

---

 

Struktur files:

   ❯ tree -L 3 -a -I 'README.md|.DS_Store|node_modules|.next' ./latihan-1
      ./latihan-1
      ├── .eslintrc.json
      ├── .git.tgz
      ├── .gitignore
      ├── app
      │   ├── albums
      │   │   └── page.tsx
      │   ├── favicon.ico
      │   ├── globals.css
      │   ├── layout.tsx
      │   ├── page.tsx
      │   └── posts
      │       ├── page.tsx
      │       └── postPage.module.css
      ├── next-env.d.ts
      ├── next.config.mjs
      ├── package-lock.json
      ├── package.json
      ├── postcss.config.js
      ├── public
      │   ├── next.svg
      │   └── vercel.svg
      ├── tailwind.config.ts
      └── tsconfig.json

      4 directories, 19 files

 

Preview Stages latihan-1

nextjs : first.

 

nextjs : hello.

 

nextjs : page posts.

 

nextjs : link a href.

 

nextjs : Link href.

 

nextjs : css global.

 

nextjs : css global.

 

nextjs : css private.

 

nextjs : tailwind.

 

nextjs : error component.

 

nextjs - solved : use client component.

 

nextjs : import components.

 

nextjs : import components cardList.

 

nextjs : import components cardList className.

 

 

DATA FETCHING

 

Data : https://jsonplaceholder.typicode.com/posts

nextjs : data.

 

nextjs : fetch.

 

nextjs : Typescript interface.

 

nextjs : map.

 

 

nextjs : Component ViewUserButton with props.

 

nextjs : Handling error - Each child in a list should have a unique "key" prop.

 

 

CACHING & PRODUCTION

 

Build to production :

    ❯ npm run build


        > [email protected] build
        > next build

        ▲ Next.js 14.1.4

        Creating an optimized production build ...
        ✓ Compiled successfully
        ✓ Linting and checking validity of types    
        ✓ Collecting page data    
        ✓ Generating static pages (7/7) 
        ✓ Collecting build traces    
        ✓ Finalizing page optimization    

        Route (app)                              Size     First Load JS
        ┌ ○ /                                    6.95 kB        91.2 kB
        ├ ○ /_not-found                          885 B          85.2 kB
        ├ ○ /albums                              136 B          84.4 kB
        └ ○ /posts                               353 B          84.6 kB
        + First Load JS shared by all            84.3 kB
        ├ chunks/69-6881ef9c69666866.js        29.1 kB
        ├ chunks/fd9d1056-d03af0e963d7a2f3.js  53.4 kB
        └ other shared chunks (total)          1.86 kB


        ○  (Static)  prerendered as static content

 

Start :

    ❯ npm run start

        > [email protected] start
        > next start

        ▲ Next.js 14.1.4
        - Local:        http://localhost:3000

        ✓ Ready in 192ms

 

nextjs : new Date().toLocaleTimeString().

 

Solution so that when reloading the page it will also request again.

nextjs : new Date().toLocaleTimeString().

 

nextjs : new Date().toLocaleTimeString().

{cache: "no-store"} artinya, setiap ada reload maka akan dilakukan request ulang.

 

nextjs : npm run build.

 

    ❯ npm run start

        > [email protected] start
        > next start

        ▲ Next.js 14.1.4
        - Local:        http://localhost:3000

        ✓ Ready in 273ms

 

Hasil pada page posts sekarang akan selalu melakukan request ulang setiap ada reload page. Hal ini ditunjukkan dengan adanya perubahan LocalTime yang ditampilkan setiap kali ada reload page.

 

Jika ingin dilakukan request ulang secara jeda waktu ditentukan dapat menggunakan code berikut :

    const response = await fetch(base_url,{next: {revalidate:10}})

 

 

 

---

 

 

---