What's new in NextJS 13?

 NextJS had released the latest version of its framework NextJS 13. There are so many changes can be obviously noticed. I summaries the changes in short notes.

Folder-based Routing in NextJS 13.

1. the pages folder had been removed and replaced with app folder for routing purpose.

2. use folder for file system routing.

3. use square bracket for dynamic routing [id].tsx http://www.mywebsite.com/{id}

4. use  parenthesis to exclude the directories from routing. (excluding directory)

NextJS provide to turbo mode for fast app launching in the development machine with the following command

npx next dev --turbo 

NextJS had reserved serveral file names in NextJS 13.

• page.tsx
• layout.tsx
• loading.tsx
• error.tsx
• template.tsx
• head.tsx 

Update nextjs.config.js configure file to use new feature app folder instead of pages folder for file sytem routing

/** @type {import('next').NextConfig} */

const nextConfig = {

  reactStrictMode: true,

  swcMinify: true,

  experimental: { appDir: true },

};

module.exports = nextConfig;

 Update packages.json file to enable turbo mode in development

"scripts": {

    "dev": "next dev --turbo",

    "build": "next build",

    "start": "next start",

    "lint": "next lint"

  },