examples: polish some README.md (#72117)

## Description
I have corrected some mistakes according to the [contribution
guide](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md).

1. Update `create-next-app` script
2. Remove redundant new line, space and double colon
3. `readme.md` → `README.md`

### Adding or Updating Examples

- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

---------

Co-authored-by: Sam Ko <sam@vercel.com>

test/development/acceptance-app/ReactRefresh.test.ts

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { sandbox } from 'development-sandbox'
+import { createSandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import path from 'path'
 import { outdent } from 'outdent'
@@ -11,7 +11,9 @@ describe('ReactRefresh app', () => {
   })
 
   test('can edit a component without losing state', async () => {
-    const { session, cleanup } = await sandbox(next)
+    await using sandbox = await createSandbox(next)
+    const { session } = sandbox
+
     await session.patch(
       'index.js',
       outdent`
@@ -55,11 +57,11 @@ describe('ReactRefresh app', () => {
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('Count: 2')
-    await cleanup()
   })
 
   test('cyclic dependencies', async () => {
-    const { session, cleanup } = await sandbox(next)
+    await using sandbox = await createSandbox(next)
+    const { session } = sandbox
 
     await session.write(
       'NudgeOverview.js',
@@ -213,7 +215,5 @@ describe('ReactRefresh app', () => {
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('Hello: 300')
     expect(didFullRefresh).toBe(false)
-
-    await cleanup()
   })
 })

test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts

@@ -1,4 +1,4 @@
-import { sandbox } from 'development-sandbox'
+import { createSandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import path from 'path'
 import { describeVariants as describe } from 'next-test-utils'
@@ -13,7 +13,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
 
   // Module trace is only available with webpack 5
   test('Node.js builtins', async () => {
-    const { session, cleanup } = await sandbox(
+    await using sandbox = await createSandbox(
       next,
       new Map([
         [
@@ -35,6 +35,8 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       ])
     )
 
+    const { session } = sandbox
+
     await session.patch(
       'index.js',
       outdent`
@@ -71,12 +73,11 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
         ./app/page.js"
       `)
     }
-
-    await cleanup()
   })
 
   test('Module not found', async () => {
-    const { session, cleanup } = await sandbox(next)
+    await using sandbox = await createSandbox(next)
+    const { session } = sandbox
 
     await session.patch(
       'index.js',
@@ -123,12 +124,11 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
         ./app/page.js"
       `)
     }
-
-    await cleanup()
   })
 
   test('Module not found empty import trace', async () => {
-    const { session, cleanup } = await sandbox(next)
+    await using sandbox = await createSandbox(next)
+    const { session } = sandbox
 
     await session.patch(
       'app/page.js',
@@ -175,12 +175,10 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
         https://nextjs.org/docs/messages/module-not-found"
       `)
     }
-
-    await cleanup()
   })
 
   test('Module not found missing global CSS', async () => {
-    const { session, cleanup } = await sandbox(
+    await using sandbox = await createSandbox(
       next,
       new Map([
         [
@@ -195,6 +193,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
         ],
       ])
     )
+    const { session } = sandbox
     await session.assertHasRedbox()
 
     const source = await session.getRedboxSource()
@@ -238,7 +237,5 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
     expect(
       await session.evaluate(() => document.documentElement.innerHTML)
     ).toContain('index page')
-
-    await cleanup()
   })
 })

test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { sandbox } from 'development-sandbox'
+import { createSandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import path from 'path'
 import { outdent } from 'outdent'
@@ -16,7 +16,8 @@ describe.skip('ReactRefreshLogBox scss app', () => {
   })
 
   test('scss syntax errors', async () => {
-    const { session, cleanup } = await sandbox(next)
+    await using sandbox = await createSandbox(next)
+    const { session } = sandbox
 
     await session.write('index.module.scss', `.button { font-size: 5px; }`)
     await session.patch(
@@ -44,12 +45,11 @@ describe.skip('ReactRefreshLogBox scss app', () => {
     // Fix syntax error
     await session.patch('index.module.scss', `.button { font-size: 5px; }`)
     await session.assertNoRedbox()
-
-    await cleanup()
   })
 
   test('scss module pure selector error', async () => {
-    const { session, cleanup } = await sandbox(next)
+    await using sandbox = await createSandbox(next)
+    const { session } = sandbox
 
     await session.write('index.module.scss', `.button { font-size: 5px; }`)
     await session.patch(
@@ -72,7 +72,5 @@ describe.skip('ReactRefreshLogBox scss app', () => {
     await session.assertHasRedbox()
     const source2 = await session.getRedboxSource()
     expect(source2).toMatchSnapshot()
-
-    await cleanup()
   })
 })