fix(cna): pin dependency versions (#56177)

### What?

This PR is pinning the installed versions of dependencies in `create-next-app`

### Why?

Currently, we write `latest` to `package.json`, 

### How?
As far as I can tell, there is no way to update the `package.json` file based on the lockfile (which does have the information needed).

Major versions are bumped less frequently, so this should be fine to update manually.

Other alternatives would be:
- return to the previous way of running `npm i --save` and `npm i --save-dev` instead (ref: #55730). This might be slightly slower than one `npm i` pass though.
- fetch the latest versions of each package from the registry. Might be even slower

NOTE: The user has always the alternative to update the versions to their desired ones afterward.

Fixes #56174

packages/create-next-app/templates/index.ts

@@ -8,6 +8,7 @@ import fs from 'fs/promises'
 import path from 'path'
 import { cyan, bold } from 'picocolors'
 import { Sema } from 'async-sema'
+import { version } from '../package.json'
 
 import { GetTemplateFileArgs, InstallTemplateArgs } from './types'
 
@@ -181,9 +182,9 @@ export const installTemplate = async ({
      * Default dependencies.
      */
     dependencies: {
-      react: 'latest',
-      'react-dom': 'latest',
-      next: process.env.NEXT_PRIVATE_TEST_VERSION ?? 'latest',
+      react: '^18',
+      'react-dom': '^18',
+      next: process.env.NEXT_PRIVATE_TEST_VERSION ?? version,
     },
     devDependencies: {},
   }
@@ -194,29 +195,29 @@ export const installTemplate = async ({
   if (mode === 'ts') {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      typescript: 'latest',
-      '@types/react': 'latest',
-      '@types/node': 'latest',
-      '@types/react-dom': 'latest',
+      typescript: '^5',
+      '@types/node': '^20',
+      '@types/react': '^18',
+      '@types/react-dom': '^18',
     }
   }
 
   /* Add Tailwind CSS dependencies. */
   if (tailwind) {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      autoprefixer: 'latest',
-      postcss: 'latest',
-      tailwindcss: 'latest',
+      autoprefixer: '^10',
+      postcss: '^8',
+      tailwindcss: '^3',
     }
   }
 
   /* Default ESLint dependencies. */
   if (eslint) {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      eslint: 'latest',
-      'eslint-config-next': 'latest',
+      eslint: '^8',
+      'eslint-config-next': version,
     }
   }