docs: update (wakujs#726)

sandren · web-flow · commit db789c0d7fad · 2024-05-27T15:53:11.000+09:00
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ visit [waku.gg](https://waku.gg) or `npm create waku@latest`
 
 **Waku** _(wah-ku)_ or **わく** means “framework” in Japanese. As the minimal React framework, it’s designed to accelerate the work of developers at startups and agencies building small to medium-sized React projects. These include marketing websites, light ecommerce, and web applications.
 
-We recommend other frameworks for heavy ecommerce or enterprise applications. Waku is a lightweight alternative bringing a fun developer experience to the modern React server components era. Yes, let’s make React development fun again!
+We recommend other frameworks for heavy ecommerce or enterprise applications. Waku is a lightweight alternative bringing a fun developer experience to the server components era. Yes, let’s make React development fun again!
 
 > Waku is in rapid development and some features are currently missing. Please try it on non-production projects and report any issues you may encounter. Expect that there will be some breaking changes on the road towards a stable v1 release. Contributors are welcome.
 
@@ -31,7 +31,7 @@ npm create waku@latest
 
 ## Rendering
 
-While there’s a little bit of a learning curve to modern React rendering, it introduces powerful new patterns of full-stack composability that are only possible with the advent of [server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md).
+While there’s a bit of a learning curve to modern React rendering, it introduces powerful new patterns of full-stack composability that are only possible with the advent of [server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md).
 
 So please don’t be intimidated by the `'use client'` directive! Once you get the hang of it, you’ll appreciate how awesome it is to flexibly move server-client boundaries with a single line of code as your full-stack React codebase evolves over time. It’s way simpler than maintaining separate codebases for your backend and frontend.
 
@@ -125,7 +125,7 @@ export const Providers = ({ children }) => {
 
 #### Server-side rendering
 
-Waku provides static prerendering (SSG) and server-side rendering (SSR) options for both layouts and pages including all of their server _and_ client components. SSR is a distinct concept from RSC.
+Waku provides static prerendering (SSG) and server-side rendering (SSR) options for both layouts and pages including all of their server _and_ client components. Note that SSR is a distinct concept from RSC.
 
 #### tl;dr:
 
@@ -135,17 +135,17 @@ It begins with a server component at the top of the tree. Then at points down th
 
 Server components can be rendered below this boundary, but only via composition (e.g., `children` props). Together they form [a new “React server” layer](https://github.com/reactwg/server-components/discussions/4) that runs _before_ the traditional “React client” layer with which you’re already familiar.
 
-Client components are server-side rendered as SSR is separate from RSC. See the [linked diagrams](https://github.com/reactwg/server-components/discussions/4) for a helpful visual.
+Client components are still server-side rendered as SSR is separate from RSC. Please see the [linked diagrams](https://github.com/reactwg/server-components/discussions/4) for a helpful visual.
 
 #### Further reading
 
-To learn more about the modern React architecture, we recommend [Making Sense of React Server Components](https://www.joshwcomeau.com/react/server-components/) and [The Two Reacts: Part 1](https://overreacted.io/the-two-reacts/).
+To learn more about the modern React architecture, we recommend [Making Sense of React Server Components](https://www.joshwcomeau.com/react/server-components/) and [The Two Reacts](https://overreacted.io/the-two-reacts/).
 
 ## Routing
 
-Waku provides minimal file-based “pages router” experience built for the modern React server components era.
+Waku provides a minimal file-based “pages router” experience built for the server components era.
 
-Its underlying [low-level API](https://github.com/dai-shi/waku/blob/main/docs/create-pages.mdx) is also available for those that prefer programmatic routing. This documentation covers file-based routing since many React developers prefer it, but feel free to try both and see which you prefer.
+Its underlying [low-level API](https://github.com/dai-shi/waku/blob/main/docs/create-pages.mdx) is also available for those that prefer programmatic routing. This documentation covers file-based routing since many React developers prefer it, but please feel free to try both and see which you like more!
 
 ### Overview
 
@@ -255,7 +255,7 @@ export const getConfig = async () => {
 
 Segment routes (e.g., `[slug].tsx` or `[slug]/index.tsx`) are marked with brackets.
 
-The rendered React component automatically receives a prop named by the segment (e.g, `slug`) with the value of the rendered segment (e.g., `'introducing-waku'`).
+The rendered React component automatically receives a prop named by the segment (e.g., `slug`) with the value of the rendered segment (e.g., `'introducing-waku'`).
 
 If statically prerendering a segment route at build time, a `staticPaths` array must also be provided.
 
@@ -547,7 +547,7 @@ export const Component = () => {
 
 ## Metadata
 
-Waku automatically hoists any title, meta, and link tags to the document head. So adding meta tags is as simple as adding it to any of your layout or page components.
+Waku automatically hoists any title, meta, and link tags to the document head. That means adding meta tags is as simple as adding them to any of your layout or page components.
 
 ```tsx
 // ./src/pages/_layout.tsx
@@ -691,7 +691,8 @@ Files placed in a special `./private` folder of the Waku project root directory
 ```tsx
 export default async function HomePage() {
   const file = readFileSync('./private/README.md', 'utf8');
-  /* ... */
+
+  return <>{/* ...*/}</>;
 }
 
 export const getConfig = async () => {
@@ -705,7 +706,7 @@ export const getConfig = async () => {
 
 ### Server
 
-All of the wonderful patterns of React server components are supported. For example, you can compile MDX files or perform code syntax highlighting on the server with zero impact on the client bundle size.
+All of the wonderful patterns enabled by React server components are supported. For example, you can compile MDX files or perform code syntax highlighting on the server with zero impact on the client bundle size.
 
 ```tsx
 // ./src/pages/blog/[slug].tsx
@@ -736,21 +737,21 @@ export const getConfig = async () => {
 
 ### Client
 
-Data should be fetched on the server when possible for the best user experience, but all data fetching libraries such as React Query should be compatible with Waku.
+Data should be fetched on the server when possible for the best user experience, but all data fetching libraries such as React Query are compatible with Waku.
 
 ## State management
 
-We recommend [Jotai](https://jotai.org) for global React state management based on the atomic model’s performance and scalability, but Waku should be compatible with all React state management libraries such as Zustand and Valtio.
+We recommend [Jotai](https://jotai.org) for global React state management based on the atomic model’s performance and scalability, but Waku is compatible with all React state management libraries such as Zustand and Valtio.
 
-We’re exploring a deeper integration of atomic state management into Waku to achieve the performance and developer experience of signals while preserving React’s declarative programming model.
+> We’re exploring a deeper integration of atomic state management into Waku to achieve the performance and developer experience of signals while preserving React’s declarative programming model.
 
 ## Environment variables
 
 It’s important to distinguish environment variables that must be kept secret from those that can be made public.
 
 #### Private
 
-By default all environment variables are considered private and accessible only in server components, which can be rendered exclusively in a secure environment. You must still take care not to inadvertently pass the variable as props to any client components.
+By default all environment variables are considered private and are accessible only in server components, which can be rendered exclusively in a secure environment. You must still take care not to inadvertently pass the variable as props to any client components.
 
 #### Public
 
diff --git a/docs/create-pages.mdx b/docs/create-pages.mdx
@@ -16,8 +16,8 @@ For example, you can statically prerender a global header and footer in the root
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { RootLayout } from './templates/root-layout.js';
-import { HomePage } from './templates/home-page.js';
+import { RootLayout } from './templates/root-layout';
+import { HomePage } from './templates/home-page';
 
 export default createPages(async ({ createPage, createLayout }) => {
   // Create root layout
@@ -46,8 +46,8 @@ Pages can be rendered as a single route (e.g., `/about`).
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { AboutPage } from './templates/about-page.js';
-import { BlogIndexPage } from './templates/blog-index-page.js';
+import { AboutPage } from './templates/about-page';
+import { BlogIndexPage } from './templates/blog-index-page';
 
 export default createPages(async ({ createPage }) => {
   // Create about page
@@ -74,8 +74,8 @@ Pages can also render a segment route (e.g., `/blog/[slug]`). The rendered React
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { BlogArticlePage } from './templates/blog-article-page.js';
-import { ProductCategoryPage } from './templates/product-category-page.js';
+import { BlogArticlePage } from './templates/blog-article-page';
+import { ProductCategoryPage } from './templates/product-category-page';
 
 export default createPages(async ({ createPage }) => {
   // Create blog article pages
@@ -103,8 +103,8 @@ Static paths (or other values) could also be generated programmatically.
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { getBlogPaths } from './lib/get-blog-paths.js';
-import { BlogArticlePage } from './templates/blog-article-page.js';
+import { getBlogPaths } from './lib/get-blog-paths';
+import { BlogArticlePage } from './templates/blog-article-page';
 
 export default createPages(async ({ createPage }) => {
   const blogPaths = await getBlogPaths();
@@ -126,7 +126,7 @@ Routes can contain multiple segments (e.g., `/shop/[category]/[product]`).
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { ProductDetailPage } from './templates/product-detail-page.js';
+import { ProductDetailPage } from './templates/product-detail-page';
 
 export default createPages(async ({ createPage }) => {
   // Create product detail pages
@@ -145,7 +145,7 @@ For static prerendering of nested segment routes, the `staticPaths` array is ins
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { ProductDetailPage } from './templates/product-detail-page.js';
+import { ProductDetailPage } from './templates/product-detail-page';
 
 export default createPages(async ({ createPage }) => {
   // Create product detail pages
@@ -172,7 +172,7 @@ For example, the `/app/profile/settings` route would receive a `catchAll` prop w
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { DashboardPage } from './templates/dashboard-page.js';
+import { DashboardPage } from './templates/dashboard-page';
 
 export default createPages(async ({ createPage }) => {
   // Create account dashboard
@@ -197,7 +197,7 @@ The root layout rendered at `path: '/'` is especially useful. It can be used for
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { RootLayout } from './templates/root-layout.js';
+import { RootLayout } from './templates/root-layout';
 
 export default createPages(async ({ createLayout }) => {
   // Add a global header and footer
@@ -213,9 +213,9 @@ export default createPages(async ({ createLayout }) => {
 // ./src/templates/root-layout.tsx
 import '../styles.css';
 
-import { Providers } from '../components/providers.js';
-import { Header } from '../components/header.js';
-import { Footer } from '../components/footer.js';
+import { Providers } from '../components/providers';
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
 
 export const RootLayout = async ({ children }) => {
   return (
@@ -251,7 +251,7 @@ Layouts are also helpful further down the tree. For example, you could add a lay
 // ./src/entries.tsx
 import { createPages } from 'waku';
 
-import { BlogLayout } from './templates/blog-layout.js';
+import { BlogLayout } from './templates/blog-layout';
 
 export default createPages(async ({ createLayout }) => {
   // Add a sidebar to the blog index and blog article pages
@@ -265,7 +265,7 @@ export default createPages(async ({ createLayout }) => {
 
 ```tsx
 // ./src/templates/blog-layout.tsx
-import { Sidebar } from '../components/sidebar.js';
+import { Sidebar } from '../components/sidebar';
 
 export const BlogLayout = async ({ children }) => {
   return (
